{"_id":"@material/mwc-tab","_rev":"717-481f3f6e364970e31ee5622b33ca58b5","name":"@material/mwc-tab","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-tab","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.6.0","@material/mwc-icon":"^0.6.0","@material/mwc-ripple":"^0.6.0","@material/mwc-tab-indicator":"^0.6.0","@material/tab":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-RJ3+XLeWoEkie48jGCy0qO3KRX3aOfGgZC1h7bNithu2uv2woB9xQCeKn2UlLRJ7iFktyqmuwyV4kl1vnJlYVw==","shasum":"19f9d0ba4ba16739441d4ed661b5a4b582c3ca50","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.6.0.tgz","fileCount":15,"unpackedSize":290056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAsCRA9TVsSAnZWagAA5aMP/A4VRAnT7agITwGWBQAs\nXGu9gZUm1tQb6jKcYQEDLbOhhweSvJFrPN1rNdUwWkZqiFiThtk7W7RZ3ejM\nNYez7MxVbbqUQNyt4HRK81r597e38eM6amf0cEy1XLjRojcKEMs4GKdRUKrL\ndLKyn2HZNV0F22tpT5Cb/T6PbA7WHRYEkRmAf6xEnlqwA6rDCEg6c8ZX88r7\nOGozVocZGQZd0Lcd1qrR0OTq3XXmBSHQ8zbjp8HVuTh9Non3pbndV3eksPPO\n44YBMBH9/6jR/ONOoZztjMLQJHBon6dopBgeRUTHNMwjy49YYLwaBTrIy1Xw\noRW4lzxc8n981BnVIyu8b6+VLPklBycrLpqgBfheComUzE8e6jVMslnRmEd3\n2cbzxNzZBxGdNpeVN5W5ZBAavAIXKUd7+6B7Heek3ualbB1kTyGF7Jx0k5Jl\n1/MhLBAZyuhGUC5Q7jv11iJx7Bv9EvWPJIsWgn1poljhwhEhdXB9IrZ2sjMi\ncYv+YJWnt13yZYRY3W67RhnRoSnZTnlC7lbGyDjpPa46GN8PZEYTpl7JK99k\ny0iK55CCR61L+QQgcA7TtqyAT0P0/M5fEcfbtRO3wnq6UpX447DCs6Ib1OJx\nsG8SlwsRVETKkbzUVKHjDVA4qu6EH4irdfdP4L8MAl2ihlOUED8WbD9LpHCD\nuhDx\r\n=X1yo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEFRo+JRsPHo0Ri89+6BmDQ3QqWadA2gUA5wV7AaV3TAiEAjxCStM2+4eKLCMUk7BzDwlOrt5kKtOf2STWVc97XJjE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.6.0_1559773227859_0.281223929927487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-tab","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.7.0","@material/mwc-ripple":"^0.7.0","@material/mwc-tab-indicator":"^0.7.0","@material/tab":"^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-tab@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-4+YMZ9xrbc4uXgeIAldtOg1Xe3SSpMy6P1arZ0AyH8hE/xYglJNAXYH1zriz9qdW82cEO8m7GV3asDsQOabftA==","shasum":"8d0c4a78e2fa2d984d5b04fc9162c81bec48921b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.7.0.tgz","fileCount":16,"unpackedSize":61241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9pCRA9TVsSAnZWagAAMrkP/15PTyF6oMc/9IdmWx/V\n+F0IGfUr9lO5gs3S574WJOtcDtfBg93B7UVSkOWfob5SJmuYhAMl19L6tOX+\nwhDvtLd6ptbuV87pOFHexh3GTCDR6xV/6ebo6ARacgZZiKZz++y5d3gNhy9y\ng1hzpeszCayU33dtpqJe4HNH4H9paq4Kl2bl2GW+KsaCpxYFc+bskJ7XHsJE\nPjWKkXDimXOJusAf1EKQx4LWEtk4i5PrsJr2h1kkLN8ckUUG4bDTrFSSqlgp\nTm31qcIawqPgW3LbOy6a+mc4fHPJ4iDjJ/ai/fGb7O8K0LlO9ONLoQP47LY9\nw2CKvYjPkWXijjFQufL4Nx4cK611PrhUkEYJIvYrtx5J0JzKfw1HuCWz9aei\nt7gqTLhOKkVKAa1jb6GETG1AT2K6ywCAf3ywoqeRW1aMqFHNO7vk1ZBxp1+7\n4Xi50ZvIOc8aODA2ABZ0KGnClGHkWd1DDjB51t8f4M+zIutUcSWPm2AdtrkL\n1uDpJ4Lhy0CotXNvYZMxsmXyO7t44t2hN9KnBZ74rFbt//H3hl8QtYnLkfFR\ne2tH14umiIArTCKP2J0g1WIghNtwTHk4oR4UmFxD2tETYoxGn6bMhQXXrsha\nLEhjPjrnLZFoppXCmgxJi3rB1NM+FzU5E3PCX0HFT6y4VquDNAJB0o+ToKqX\n0ocH\r\n=ImzJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3X3hXYg4Q6N+q8axi5CaYVC9+oMCBNcv5r4k9affHcAIgdcEqTmMFK6lLr+yfX2m7FTLdwyVChPpiJIrxVctU+94="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.7.0_1566941032833_0.04066083297046719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-tab","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.7.1","@material/mwc-ripple":"^0.7.1","@material/mwc-tab-indicator":"^0.7.1","@material/tab":"^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-tab@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-DspGnrD3hX8dzYY2fgVuSCcsPzJbOlZFuCMtWirMvH5ZkbQMVSxefs9imFUe7BIjscz7MDOgX+8Xfde8+dK8PQ==","shasum":"2e99247075108baa98362446a2004c77eaf90021","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.7.1.tgz","fileCount":16,"unpackedSize":61267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezoCRA9TVsSAnZWagAAg+cP/0dd6HckaDAdbwknSZLy\nWL+O0VCYbLskjuTYlBkhDZxaFXD770unT1cDLACkVuX8N8gNY405YUovKSJv\nESdJ+WT5nhJ+kqlVPHtiCIlgcUGJWakaRoy+HWhhdDuAi9pb52UzAe3v4Or8\n4sPslllBxEVUiPJy3y/c8kTTKCITzAh+K/0waCaOQNN6LP+mt5E3NlqcXfhp\nhusyTI+QnOV4cCgWFvmrpsNbqNiG5xrDF7LE30yeYB/+Q/cklVcKmvHv4dd4\nWiKFQIA6ZdqwmqhYrYw3wseapUWk7jHXE/YpGz8BIWsDnZOgJzBAo4vXLy8f\n9cAekU1qNJvASKRDZO233orUywYMwqSqjJ4LZRjoBJNpc+BS0WoRTJfhGAhK\nP1npJp4L+sind1obNcRFhReiS5tFv3zwYefDYZ+pEyowIndlJwFaPkmhXT/d\nQoD9Dv2VEE2GdIvd4B/3snbMDSHItXS1wnTLVfbDJkgvrifG87cOsiADX1gx\nso+CWWxmU4dP0UM1uoo3u51JgGEEyFKx8XEba7UC2z4n0sooWS1cHivkNqh6\nFPTCQ991mF1/GIJbtDAwD2ArKwvNiw7roXw8PMBxgD/2mdr2VeVqUN35bNy2\nA0EcMTSw5NA/hqR+JkgE1niO0vDb/Lat/loJY3q2zW88jfZ9pE6eW5/D60t8\nxR0c\r\n=iEaN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgeEVcFWTVr+3ndOSKGEbncKYfdORBGf8R00KszHzo0AiBLfuK/HT8N3IhpkH6YattqlJnw/4LFcYFXW7yd6UAlKw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.7.1_1566960871922_0.7936057090455275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-tab","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.8.0","@material/mwc-ripple":"^0.8.0","@material/mwc-tab-indicator":"^0.8.0","@material/tab":"^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-tab@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-nofshJyP6jvrKb+G77d/wcfgJlTv+zRtIAFu9Uyf4YJXopdRYVvHrxTnkYy/12sXgS88r/vZFG4PXX6jsiaR8w==","shasum":"6753e3ff9923e5a107a00207b0a7a52856ee85c2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.8.0.tgz","fileCount":16,"unpackedSize":60224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+lCRA9TVsSAnZWagAAPskQAJ+ILvlQt5/nvkwy2Hsu\nHpcsjeVTnwBIx/xOnpuTR2PYBJfJflz9Vn46YfYtvaYyUexdqPE6yZzNeNdI\ndx546uquJ9VeVlBKDlINKRZTajp4LXGnizKLuV284o12TQlw4dpiqnaGUmNU\nB8H9LIL8qJb38SB64HVFzc36thQbSIkJTHJOnNxEDWF+48GlQpowibPCD4X9\ns9hhDRU1TJpZhdBgmgpHCiheM4ytgRPNvrlAR7d4ZmS14KyzbMhE/JLKo3mk\nEs0FoEUcZrrsCf5QaYhx7wkcmX0bphfz33k8elovTsEXhmeAR8TeqDF3nLcS\nIhcjTpGn3OyIgySTQ5YDVLkP9PmIZceqtPibgz683IzlvSshreJAtKFPdCOQ\nmMdsX5446TDr+A1z4P8qMD20lxGcERMDhDtKA5VPPOiXRthy9ZTmau/POTKR\n9cD+76AZOFW705/Foyoy5KonRUifRwCERLHq90bBVM1ANUJ4q3mtzbv1zinQ\nYZoY097WFThOlgtzkhkNxqRkgALSrHp3spAW6lMQbTSAcam+HDu5ubbpXftP\n2aJz/AUu0RMHlWv37qAaqXJt/5qOO9pV+6yUE/9CIHhRXDjNrl5wzeRo27uD\nZMijD8pt29sFKDHP1xMRXhOClVKdVAkZQouigmCW/biPBIYuQPjFSAcJ/rb1\nNbGz\r\n=WuNs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwMRaeiSMk9mz+Rp5H2BxpQ6INBTq0shOFZOYAj9luZQIhANJlKD7N5SU9Eukxx6/mMPCcka855/EGBb9LvP0UZSHT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.8.0_1567555493145_0.5560633207385381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-tab","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.9.0","@material/mwc-ripple":"^0.9.0","@material/mwc-tab-indicator":"^0.9.0","@material/tab":"^3.0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-hTUkrWm+FM5SvlEIhNMqhHWcCrXIQe25oueixFZ+v5xsZJOg5S940/JxwvZG1df/v6XwPvgZYq+IOcSHM5bL1g==","shasum":"6f4359498271918f1a5d59470b6842d385131d13","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.9.0.tgz","fileCount":16,"unpackedSize":60363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeXCRA9TVsSAnZWagAAG90P/0FUlvt3zg85WDGXmVAq\nJ+EwcDq8zFgMXiNuq1Gt+SUe5oNYJBGcSQgbQNGeq5pY4OqU4HwFRMFMXSC/\n7xU8H02wMkTyhSe3hof50h17V8zusD9snB4YzYqChRxpQPB+deZVJFSJXf29\njB74yf3P6/8bbIVjgLEywH6SJHhLaMdm3htYn63rUQvy/7Q8PZUpFWdURpaY\nnTQgKFhb+1TpPxjJGVTFT0AzeI7Sh6p93Tqh1cGit3xiUiDBe3pVwHqKYHPU\nOBFeVspumD7FVkHRcsdwYAmO1yXFmXoZoXWpmVHzal2VROSRI6lbjBHmGvdu\nWitwynQBvTl9Vuc3SUkwn9LvbiXWWlmlsb5gvTKGcfqiBC0JVWk/jiL7Sg5y\nHSHXcDgs8c/kFh1ix7AHItmwcaC+zEKNn/raSCTRR6kuNe/7sjofn7GjgU37\nE6iS/+Aa6mg7RHWTdSBdhbS5iGamNM03oUqOi9QOnUsoCzZMBs5+8Q4/jyub\nPXoeDAyxag47fuGiBd2RCYDZZIcCItdoSf/ADVhhO35B/gDQKjrojssKO1zT\nu11aS6aDY/HTV41mGM4LgXsNtKwox2BZy9M/+34Eb1VLpe4ukHK6Yjse8QBx\nCkmTVx5RSRFz+HAqqHtBYrFUMZVxXUuT6fZpKe57/CnMw7esCzaYApf4u9rV\ncqlL\r\n=KUxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEtrLa41BB7lsEgA1NO5QQIF99Tzi6nATq1FsqLMDWsAiEA8NhAZYS8MdNioSaWE1ulOth0rBxsg4/5p5SK3/BXyEg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-tab_0.9.0_1569548182765_0.034106672408794614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-tab","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.9.1","@material/mwc-ripple":"^0.9.1","@material/mwc-tab-indicator":"^0.9.1","@material/tab":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-jqFkxPejsjja9VTEwH8sb+mlI8+LtILgdhoZ1WFRnbDf+gjTFZy3bJdL3h5JHVPGYFfucW9P2JHL7n7PX4sWPA==","shasum":"e776db2b4dfc2fea46b4bc6bc6e84d96cf2c6803","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.9.1.tgz","fileCount":16,"unpackedSize":60787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4NCRA9TVsSAnZWagAALiEP/3qMyQumtltKYkVTMldG\nbmBl/SINby9Ml1hTtHvBcjbrbSZ4nxri8+4IwKGhGa5UAsU95NOyB8hFBzoq\nrbIBAKmmFAD8o/7buCNjYMFHnV/6FWLn6ctXjOsaRc3TMBgVg7ZGY1vzoyyi\nJ8+1+8TEl3ioEKB2dzUSSVU/uYW2YDPezt1WL7OJFvvQAy1dRph6msBi+ijz\nCs++HBgMuV4R69YyJdKMWkHNwf6jAFIEz3sakcKGmbm0owOsdaPZVTvu31aO\nRnZ9lImImn4o9UXFpjP7rieCUvToUp9zwUIS0eODFEistabVJxwGwHKJJtlB\nEZgxmHpwoUyiz9wZ9/Aa79XpD3c3UA2xqBfyipZbgUER4L9VrKIlm+hQsk1v\nyEpzVnC7UrtF7WuVcG7ofvFTgtETSStnyAHZ7YQV6IFmvRGK+bDy1br1WXul\nIUXogepbP+bbVlQJ3T+GpTo+nYLZgzI9ARzer6R0bjQj/c9hXcaAMcuWJ9eF\nKE7hrfDCMET4tXrevJL85E0hAsaajVoXZUO8hn/YXPJPgEBI1uJYLYwN4DDA\nLovObZNwnKdCJEAGBerFksRjzdM5adpjsZMsHsGvKxcurPcEgormvwbES0hp\nGv874rTLUNr1QdprbaAyJtYDp287J6yzfyQWq2Po+PsukxxkVWexKxjcyrve\nXqs6\r\n=/DOC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDgFh1MDckV/nuRIv+Ig/kcg0w/lf4dfb4VZFKDxcklOAiEA/DOsyPzz2vxHSHIQBNUvOhClBYcmUS4rIRR1MalOVq0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-tab_0.9.1_1569877517001_0.21387067721843844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-tab","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.10.0","@material/mwc-ripple":"^0.10.0","@material/mwc-tab-indicator":"^0.10.0","@material/tab":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-W7rLrdiPXxTNJtg9LuPn7U+uuS2ulkXKCXCl3uzvf5Msw11egWpop61kERzOqyYKleKDbjHxlKLFqqvtq0iuzg==","shasum":"1eee26014de46619463cb788e386fb3e84c15e60","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.10.0.tgz","fileCount":16,"unpackedSize":60871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAZCRA9TVsSAnZWagAA1kgQAJvtSQD9eSjNXqvk9Gc2\ncz4TWzJ/JuvW5taO43f1mdD89Qh4LECz2iB6Ll0N2JCQt+tXL7VUtI1njut3\nI3Fy98El4O4UwMt91Nod3ti6tFp0P1XUCk4e0tiWMamz38++zjYgXdx2nk4u\nuf0XthToa4lW2cbBeT81gnz6t+zHpAXSo6waqPuf/B+XPSpsgowhQu3BWAbg\n33Tg+S4SZpj7hw+k6VEml9euFaCIRpZIeX503O+PbXSarGFsqXixKVSQz9Kc\nsAVvJxIY9ONgnGo3qhXIz04C+qwI2WxFImIaZ9nO0Xt7Pz9iqRDqrWzqmjLp\nkeRq322cLpZ+K8Gnm0A2uXOx0mepDHET7kISekRABtT5gc/B1tVbA5Xsrk8I\nY/WQjCAkv/QTXxJQ4MciZyq3f8zuk4gD6AdQ2/yDw5Hp9E0ZNv/41kWPPiB3\n8EqWOQOygIJg8B+Hf8MV38dk1Ov1RlSSWfAJ+9Dzh+rgX0xsjzYnvy1MVYYZ\nVPYnkPz7ckos3DrSh9PprRCCBHPvhTVMwpMrRD6oHuKkuWblBVfc7WmmKA3x\nxfJqQlSHDh6P4mf4nWndcvhlA25wPhUuQmUFAsR78IaDlf4P3TpJzE0qsWEE\nm3oMTKM3/CS3me3I0oGEXbESd6F5Ysofg+xFrSrdoOkIfc5uepbFFizF5jiT\nIdtB\r\n=CxXq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD4+gF6Da1cvbZbVmCKZQ7MJNQaLgIlQec9Nfe2pv83AIhAMws2ozTFse3GUXnD3zmeQc4NYiXRwN8toBz7yeyfIeW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-tab_0.10.0_1570836505279_0.052684580878985976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-tab","version":"0.11.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.11.0","@material/mwc-ripple":"^0.11.0","@material/mwc-tab-indicator":"^0.11.0","@material/tab":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-+KRNYX/bjsGFUPv28ykAYxWLN/8IhTr/1zP09UIO478sOsrhE2Y0Li733l7caq38wqbAKdJC2qtMQzpAtW+c4w==","shasum":"2745399403e5c9e4da895006d1666f09b2d0d1c0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.11.0.tgz","fileCount":16,"unpackedSize":60919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAAWl0P/jxBm6yZrW31tyDUQPHI\nd3k89uqbvlHluBSjneOskDbZBZvX4ZSRARdSJKWcwvrM/txdclGRiLmYgWYj\niQC2V9cSJdYc/h8y1oezsbh6k8ZePZFXxMR/LlwpuqM+2Pnuyj6c2Zioq9Me\n+qjVMf4lWb9Cc1aLLadI9c7Oxzu9A3q8l+dQ+TfdPdp2/D/FuSXXsLM6zc44\n7BEIS2FOT6Cuv+ZPe5LDJOEcmrhMYZ1Gh3SBBTCH9pscrkFg6jr8WQnd0aI3\nxDLntC8VxfgszZ3zW/04ZRJUCfGC30UPzgglwxK1m0V40oWQRndABhePYOK1\nzBLCVU7HUZZGZTjld2aFE/b3T7Q2DwmEiDus/Esogsq48ENYFwhFmJmHdUgl\nEcwkX6YuPv/2LNB8z1yKBc0RRFbS3n4u0nn4mjRtHKldCYXGoAhnGQtXZ7gD\nEjfTS12Iui4gTsWt6x/unViJbgEkMlh9qMZiPyVbuEKIMRiH2fDZSUe5o1jg\nv9/gHoaAzDnFrxIt7bUnU7EN0HNutgg5e+ordPGwOJxbDPWKkvRTvUusAKHh\nWNy0PI+81vsQVm9CuKE4NZXCFL6UgHsd77ZJASLWZQqiaTnF5nmXHDG1qF6O\nRBjbni1KbIF8vlUn9tXOTmBPc8r71yAwvgc7LTmuOAuFxmq24xIj5soOuFzs\n2fsR\r\n=21Aj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWZVFdmXs9TbYSw4PvwMwJzY3KgQBWQr+VVPkMmKz/gAiEAys63mZtFVC6+abztPuSzCgAA589l3dkH/B0qZ/X37FE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-tab_0.11.0_1574804975177_0.2065468610342558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-tab","version":"0.11.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.11.1","@material/mwc-ripple":"^0.11.1","@material/mwc-tab-indicator":"^0.11.1","@material/tab":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-eLzW2SBF7QxQysQzY1+1AKRKu7ZYuULk0hDomykSuohbv7gyG8+O2cZkfp8W2y8A6knvCKKvb0XqObSimfPejg==","shasum":"154d807b84a803e5cf5ad68f988c730abb498f3d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.11.1.tgz","fileCount":16,"unpackedSize":60919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAAyqUP/08zO9RGtFNRkqRYJUdu\nP5S6a/g2v23zs/Cb8wAL7tIHfRN6s9DF124de+2N8FIBNKPhHIwIsYPBt8tw\nNi+VflGznCVZEnnCCbmcw4YVieXGL3z+pjwQS3oACocZEv4v+mTXOyc8eqAx\nnXBsMODMFaLp3rnzFDCXryPGUiSClDYzVdD+ujq0TQgGWmGER32BktBqFvgf\nQaX+xGK2KzbGkzqtzWFObJQCVnRQO1vUXG77M6KUUCKcS9a+lLwPZwStjvkY\npcVh/8Y+hhP4bkKsOaxj+XmQsKgPr+JCQfKobpiEfqiwae5BsTZ2cVXRSrQ7\ntHKumd+b0V/q4VEeBXtGVmRuczWMITBYkkOqHCjQS6F2nQAtpqxejhHhyEeZ\nq31FJ9DJV8UIAIXoZrK8OHcqEhJhP5u/UesLOkwTuzgw8LigKTakN/E9A12C\nhzGAC35Hd7baiSnz1CmvQMMJlRHG+9sCSjOzsTqEG4ho8T/1UZqLwdIVT1eH\nwq6BWxKtqKEac028H4jJJdEneMytddktb/xkHnjgMvewVvfrybVVkVENnp5L\n5mGtKY82G6Fg4pyQMpjp8nERKM3pFQmKGZgu0hfqGL+poLiErSOyIjV3ODA8\nLFXH42ns0nt9KT2CwoFbIDlPoyxGQYwG3HCd47SFWjMY4/py6f/ZovOrBu9D\nKN9R\r\n=LY95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzJ8B4PUdh7Z9gshqE7QV6odx63yhsPNKbO0Yfq5A5HAiAfnC37dD0Q1ILlqlHMECp5TZzeSqomh4n7xQH8MTbEbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-tab_0.11.1_1574814403648_0.9848541460253986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-tab","version":"0.12.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.12.0","@material/mwc-ripple":"^0.12.0","@material/mwc-tab-indicator":"^0.12.0","@material/tab":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-Oe7qizLJ7AwRxLT3en0tGOLUfi/febBGvxKYDnRJXcH5c+jYdfU7CAqQx1t4xcUV8lVecOsMkkzQnKgKa8wP4g==","shasum":"e88f56086947cbfd10aa1bd70744ed09936dd29d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.12.0.tgz","fileCount":16,"unpackedSize":65356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkvCRA9TVsSAnZWagAAFi0P/RWkHsz0M5qKTC0NEAUX\neJ3DxO8y8Z9L2rHW8SEjbICHIB7BWhLsjArgVmNxb5hyTFJpv6EEvIlOA8ug\nn4/UsMwtGNDiShw6t3VlL5gwW3FHXdyOM8snSzr2LOld5VhnK5ml2HbbFTby\nsMm8uWDXPUEIFsI47dBR3kC3SaWLK6BMfUfoSjlizMuUwIrqLTyQUxgJen+X\nmwIddbX6yw4kL7noLA1DITct2E56gGYYwgkYDIeutDLffmCjsRfs5XuZrA7t\niitb7uNamzA/mgTtXLzH4R4R5Esu+2KPJgiiyKWEmdx7ZKxoqnHvl8M15fpf\n3El+zzAnhgRidETDeqLTbvUANIKt6WZwjh6QRbWr1g+itnRTlN/n1poxS7kq\nd4zxRr+vIfRmu8EiFSt29bEx+t8/n6BsWOEqOntKdAsJ/Oh2Qg7ByCV7c89s\n7RH4WbrARJD97cxzSBCtN7J+ZoEbLsLM167UqXQaAtxkZ1/qf+pYbBzRZ9sm\nQvQ4GFQ1no05QiD7WSgym92XWwCq/LfB50vInoxk7H4BfLrhqNEzejGHfCnn\nKoOV2mDBKPSXNM9WQ6nyqW4eiMSIyrTQmUor2FPV/uT+cZ0tOIGR/baX1W+4\nyFtgFV1+koeHdCIxVezsV5hQ8Sl2m3ghZTkbl0a2aUPv+NC5xhGR8eRWo3Ws\nBDdN\r\n=S/N3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh1oIa9C5Vn/luy4UwCZdKj1AgOtrJJxLUnCQo5ZQX0AIhANEndfQttap3zacFmJcT8uha6duwDCImswYX/BHvb+Z0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.12.0_1576626478699_0.5126250574025464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-tab","version":"0.13.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.13.0","@material/mwc-ripple":"^0.13.0","@material/mwc-tab-indicator":"^0.13.0","@material/tab":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-cgr/E4ARF5IUUwMLI2yE+3z0+6ICEAZskqBvJ+iOmLuzOyWeNKFi2y3GTvJNrw96sVkCnmagEApkJW33Lz4SPg==","shasum":"c6382edd868a174ea4cb6535b570d6a4c880bfce","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.13.0.tgz","fileCount":16,"unpackedSize":65563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcxCRA9TVsSAnZWagAApIMP/31KwMPsUoAuQxx3mZy/\nLv7j9PEXB281xY96G7xdI86HTgLHVbHeROJttdL8eOnqSPqYrXU6+WtzmWTX\noWoxblCM8fO6DOgimH/gx2iNP8IN3rhLbPX+LIeOK3U+hhbaBOetr5vgYgxg\nbJZN4Og7WtWRnGGsaTDiZOT9gOtVQ5icSEA+ci9BSEdWigS8A3LV+aTHbul8\ncreXrGCOKBJY1zBejxnO+/sJkJVEo9kC1hufWwQL9pdOcaBHVwv+o8gbXdDx\n5VRxy/j8GZJMN9zqP0NOq1CtITjp8d8IbeuWML1AN2paiILK2QWzt1CS1G8C\neXvU0UFxtpgHQZK6lLj2CUS1AzkmD6KZvKhDPFZCOPHBQTSbS1261EqXP4u+\nxK3blcRZ6LhZtK26j8H6/4QvrsmRSt1TspVunKvTdkG4nYqxaP/slnw+qZv/\n8hvyf4q+Wbr6Bs3ZSORH+0WMLk0Hw4DRLanjxW7Mw8cGJV9Oz+4O3KRxxroM\ntc9MuHMTM4NJU/fZFNGyE3riNVIO7adzMG1e35qH52XN5kPfx3kzYAH5q5Us\nFXuMzV0PahwAVxjqAKcfMqMJXkLcSmln8BfTMTwumxXH8Iy4TsAi+y5mkrSu\nEHFWvyUq5oY/nJ2FACirYcmvp+vmmwYT39BliDAFCw4TsX8s9MLF1UokOyED\nd1i6\r\n=qi42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBV1QF5N+tB0G111GYuWAjLTiVV2dKkBVsxU6J+v/ePCAiEAmZ8T6+PRkwBq/WEAqoAPB2T5HmCzk3dtc0zQk9c6R28="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.13.0_1580791601336_0.09954691585775843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","@material/mwc-tab-indicator":"0.14.0-canary.f790f713.0","@material/tab":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cKjCFykpSLhgisMROCTWrFxWchOX4PvQKKXk4IG8EM2MztBaH3kknG9pvrInixVIrGsmdqMdWbDGlgsddO0GlA==","shasum":"7d716dc17d99b746ec81b00af9513257412e1566","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":68166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrPCRA9TVsSAnZWagAAv3AP/3sA7hhoZGgX09KuzZiY\nXQ7PVWZRnSCFlAvXnZ5tBfFTgsPEv4wf4Lbd/tl7DVk8HkNqaf5m6/DFsF9S\nTOkzIq0a4C3gN0jOXzKvO3v7KX1NFLuw5mFMq8O9G3t1NoHV324L+6z1TG+C\n+c+v9tFjyGHD/v/JT7v4eMv/k6NBg1POkwLXiPqioL8zp9oOGkArE3Zs+NAw\n/AiiEmyZCjytTbnTZT9rxGfTQlwNIu4tgRxrpt5gzUC5+L+R/+SArR2bDMjV\nG2DhnnsLk1BCezbGPXbHQe/kxKr0bgJKfd+89VgVogZtmV3MlDfqITOnu804\nKsLM5e56WG7ss6iilcFe3auxrp+ggvYTWhKC9k7Jgqgi6JTU7kwH1Aa7QETz\nNYShDyei3QmRelW/SgSz5Ed7kKq6ZiMqyd2iedVD1D8hhgf43shktb6d24vp\njHDlzP3H8n/CdNMccmX9MLxh4yELRE4H+0yg0sHP7QdgWrW+EViM2NJavRZF\n7iZnXhZXedtQXqKbJzwYJvc5wMn2mA0fCGZt600RNHfpiHPNv4mmGMSYhPdR\nDuNc+bv2X8vl5nbVMJjt/npkSaMrUhA4J6F5SRO6yyHGEad6a9iD1jAhrIGw\nTO4qv6WGe0wVjsuA9LN8/ilyth/ZQqZZDwOgnt5RSCmnxA6LyNjMJ78T7JNe\nt3Z+\r\n=IB/c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNSqn2KNkjBOL6bE/ogHZUwvesEsrQGGWn0SbnuXs0iAIhAOH+gJFYRoXUWXwiuqzLbzBJUHG9J3v0irxXgsETMBi1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.14.0-canary.f790f713.0_1582856911575_0.1309443238283634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","@material/mwc-tab-indicator":"0.14.0-canary.c759cfbc.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dvz0/H/BQ0nxzpsdBYlN+pxSQTakP2AUYRklIvYccNDhSD8fUzlML4+9wqeWUtGEpeKmr3XkIrJv3e8SEK8QnQ==","shasum":"1c356984a45459daa044f0bc7255703106dc6306","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":68166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaq0CRA9TVsSAnZWagAAPwkP/jpwBHJLqWoAAfSQJdjb\naR5SURqvaD6z1PIzhS6y7xQT51oggjHd+HBL45jjlPt+a7klL3UHNJ4YBxGQ\nW1flkUP+fe0/2M/Ii5otApYCBZ65Lh6MzogdzlE7mqtk9QnAY2B9LILf7lC8\njAaw4JNuaXs3pkyjj/TP7NRGdu6dNSWtAAIi1KAQ6fLjr1c9PS/IVKRScKsk\ni+580WjmGdxGwPbEKsKWaGqsUdfyP/8Vnw6EAcrUk5oNtL7IlkPWRwZC1moQ\n27BohbCxiVB1BgPI8dTqV9j9nsapyyisWbjpyEJueC3S50zzSBG1d/fvikT7\ngccrXhvz/flMSpxQpazbqEboi4bu0/GMKAftZlLy73CshSglErStKXJjCn6Y\nhuzad9yEQvXzBi5Aj16X67mqF8yL2Lk7usb+Fsxel8+Q7c+PkURoDQpU7q+v\nAy97z4wRZSLY5rf5pxuIE6jSFPHJiea7HCY8NBTQhmPVMjTWEM8thYmmkAAN\nqHUjXRsUwWevTc8mYbI6EA8LolqlfTVOUXWTh2P9LvglOPHsTLu461e0Dk6d\nFUEVszmk2mM0+JcxtgJzAFUuZkMLBXNikHXfVftUGBPkE1jgaAQ1iJC6O5U5\nm3Wxeor7kx3ZmsR1rla5upDT54QCZcx6819HLQyDcEMA7VIwGISMPXD9Wo+l\nL+CA\r\n=pgBs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOQFwMkGpkpdT1fZTw1+aiOoPCwFNj4ihskzObn/dnLAIgZkTYOag/5yDL4dc+U7ss5sgR2OoFNyPC/bvDJwSZXC4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.14.0-canary.c759cfbc.0_1582934708120_0.1924081227849681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","@material/mwc-tab-indicator":"0.14.0-canary.97ef53d8.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RGMU623ZNjbaPFI1Xx02CXQr4Q7u3VzN1Bkfd/Rjc6vUMAX5S9pT2jMOQwl5VGVnbFpwcSCg7rDHnk8AamqbUw==","shasum":"2aecfd8e855e316d5ccfa877e31a930667b3762c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":68166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3aCRA9TVsSAnZWagAA+f0P/jNJGny1X1ID+fUCHVC4\nHu1tlKKZPBoyVvItrzoMqSqZFXdigwwYtM0zttUV007BODs6Dt6AA2UeecOI\nGz0mTuIBU1toDA+OtUHDKPjFQJdQ4a0X5HHbZzxCp1DIwyzYTy8QzxwJhdCg\nNB2Zt7cnFmnFv56BzM82v995JfOpea9/XunNYLXdyDojNOxTKlkkHR4gY5W4\noCBuV4ART6TOlX+/Mj7H3chKrbSmo4xYXk7yjglz89F3xg8+YK079OucDOZ1\ngFmQ5Sy78mN4vMGvR3goOPamEoRcTgYTcXnV6ehbTJG5FXKShMraTotoeuLm\n9W6fhsoJ0DYdWDvjdWIeCNisHsPy3kRJ1JeCfRR3wvnqCdvTUi/9ezZL19aF\n+fnU02DP91jTWuio8M5a34jbzuf8Arw1k0E6Q37wRHg/4xcfV6QjtvPy5mZd\nHeCoGfQ+36GIbjdW6WRm1WAcT/OHvZ0fo9tsJ9g2NdjAHhiclqeTv0JWZNnI\nwddyHnmfRQde6kOtfG5loUUAsZ0KUOGuoXpCkcF372K00lZGmP0ElBPoySyH\nGSh7+f0zwhmIpyvf6umkrLbMeaN2N167OGSYGkIye9AACQffAgGGV/3e1Tvk\nuYuY0lwalHwHZwwh6DxJU5dipWccgHpmIXD5YSe4RycHjieg1mzN/ZlMD3Yr\nkIEZ\r\n=KcYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTBmPqtq6SavnAiw4Gc6w+AdSRuYhLfmgDTF7jgtk5QAiEA2XVI9D5FNvXFQdV22MvgRX3Dvpj1qgBpqoMij6jAInA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.14.0-canary.97ef53d8.0_1582935514524_0.5735472908485852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","@material/mwc-tab-indicator":"0.14.0-canary.24f5fa6e.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jYAunH9mJauAwgelv2niei1dzt9GhLqObP3gZwa9PaEToqg+CXD/NodLdpdJO52fFE57Rm7E1/KLuiPBQXGrqA==","shasum":"cbb0b638b7c32561db6b7772d872d423a20d37bc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":68166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmtCRA9TVsSAnZWagAAieoP/jAqiUuK+5wcvocbPg6d\nKZBKhCH+egrJ245klLzMLewU73OQNiMxIiIxk75UwqaDXvmS17w4n87XZ9Ec\nw1irlVEjgNJhJ/QUU0W62Rxi71fblp66N6rFOcsB58w0DA39AWhaWgGEE5zR\nEyXqX3GJhVF7NJkeWy7dr7Fxj149jXKNz+PSn7KjX6arwt66KNaJvDCr0vdN\nN48jLESfNXsPQytbkFXJjqI5aTaQh8/Nv10jZagQR5SHv+oU1yV8rNplOct+\ndBoOYb6KYjxjqoGSDHan3fPKTnvFU6aLHfZC8cjdW+GaLNrWQDiIMFHCNYe0\nx4qiH6NXzOf1IhqXWWOKQ6o+9gXpEwwFRTlcCfwIMk+Ki5sIc6w6qnVFdjg+\nHDCJ7lO/pBEtI/62hpR+t7TiJ7bmCtfAYzcEeOfiKb9NwYhAd4IhfEFMBmQP\n8EwqzopL9ljwoTabf4OM2Q0Ldw6gGFMJZpsGDzuaiG+e5rzr7n1K7vtHA0aH\nW+/gO8/C5EYOTWgjudY/sBu7g4pKC07zhJBfAwAcW7cX/+u0pdBmEPfacuqQ\nKR+uRbzjRgTWAmxOZFjcQMk5U8bK6akpixp9Nss7NCv+RsobjNAKPYKQmxB4\nEwvce29foIoP7895wecw1S68TI5JvcJeuAY8ZQBGE4lfCN1QTy1BQG2s9JNy\n3Qro\r\n=YR/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3uU7KcmxW7Tqg4p910SXdIZzbNh24wNWo9rNL8eQd7AiEAq0k7eKSYH4lYvLD31x0z41kS2PV/nf1w2CXPL5HEUzY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.24f5fa6e.0_1582938540541_0.26288049293634175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","@material/mwc-tab-indicator":"0.14.0-canary.960e214f.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YBBwk5DqSASsa6Ges7+LC6PwpZpYlJdmQd1Q5EepDUyV43683WGrfmCtFezLEKl9UYmZ+RxpIGIQJroGaj8bJA==","shasum":"bd90188c3c27c1ff25b15143fd24ba506620ffda","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":68186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXgCRA9TVsSAnZWagAA/mEP+wXDMrNWRvSdEYUDbkti\nqeZk+fF4wa95gM6GR8kc8x5fNG7TeyleAI/Ivfv90dWd/hsHbxcalTWVSdyy\nXU/Et8nYkTojH1btkXVrhfTdr6jzSDrhGXEuFnufCxuhnhuhjVV9OgcQfUbM\nkkYU9ZWNvCcztg9IAiqImjmBKcJalv/6iQeeTlFtMC2eVxE+7cOUy7cTSVtj\nscWqJl29gKAzssrafmjjkSqDNcRmN3oY4DQrpLl0bNqv7zGHRXylrWpoS5NN\njWsEaRWweLH8XAV4GIbxtzLND8XUaThw8+sz4jnuGOczIbbzQooZ7yBxFnNc\nF0/2ttcBAguI8nneK22z3vk1ETpeEp/j0Fb7Kh5iz2vWamua6SAR0zAGULj0\nQAS93+rtWKE+iXvS0PO1bZUSL5Up68CW58DuRFrEgQNxxTHCI+vfVofguQf+\n+ajB1IxWYZNFVdsGqsJRUaezX1YPBhQdK5pWtj2ZqouMQLAsXHaKqfQ+p4lb\nuZLBLGAq4hydI402JT+bhH2WY48YFhpcEISxGgMKQrBHqWh8GUVGa5wa2QsE\nV9gA3mbiI8jpvZXZuQjnSMpUlgE1FJPo14LAKe/0llXfLPezrBgFw8eE7O0f\nhM/HXRxVM65FFzYXEUDEcC96r3BgvBYvf0t7Bsg8HuSGa8v6sVWSmn47GqjL\n1zhU\r\n=LQSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBf/g9r8Zbdm6Nwo8XWur5eGLosI0KrdlFWsWfAzmHJNAiEAsYQ3U8cAIaSoWVJAthtu0qsfqY4Hi7lbMrHJx7dH08o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.960e214f.0_1582945759700_0.6780343056653757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","@material/mwc-tab-indicator":"0.14.0-canary.a2f046f5.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eX7jKPiey5J8RMFMa04k7ivVTTPuWvnYO1dNJRr5zjg6TlMmg/yM7csHfypqsTGkmIUdTlRkdXrlQBOaNtteqA==","shasum":"c90379ecb91a3eeacf4bcb9170ce773975a39edc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":68355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatXCRA9TVsSAnZWagAAvfwP/1rOV3TSmNv6wTdtwPYO\noi0q+xz0oX3GM+m0koMj6ncm6nDM/DcX+PR/C+mm0me73cVBObLgT8VKnWqy\nrGqe2m6fECcSeKAjdifGR3LSaeYIuQ5asVO2GLAYnJBf7U4Ina6k9sBsB8Kp\nm1hVJlactLDI44W40WR8ST1/yRt5FFedVXe29WraYp4ktEga3483iZG8W7Hd\nmtO9/n+kZHQjLBE4Zo0/pIOgPgYbmsVKgNydqM2Fgj5QWNlrYhCMNzGQ4fXv\nPwPGQIHQGsMqmtdxeia70VoWFJPDFJ3hMHnfQgXtPni+IrIDvp9XKjXZ3E4F\nvOXKEda4kfc4tnhZfq2iF8StzwAytKXEjWYzzNCsKGXvi89Cy4ctvo2CiD7C\nltNeEjPWQYI4qBJjjosdVu8pZR0akcfZjOdlfCzZGBgwn7ZrmmIo0gqSRtJc\nrItgNiDuLiPqUqck/hOplzypuWf1ULYaBS5SbNgSWzY9gJ3DnXz2S3GG1SBl\nIU41hRMlk5pmPFBTNzbIIywsMav7n4aJ/8EUEASdcVecwNx5CmiD+2B6b2Nu\n7xWhn/SNaCWm7cmG5jBhSJDQpRR0b94oabzw5DkA2ce+nHw+j01ndUKwoUud\neVmApMjHrtnDJtsnTE/F3aPT+fg6aIDD30cQYRHZ6thySuX+TSzLqCBu2yYT\nKe5n\r\n=4naX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIXyYEngxcgkV9jR5GrYlwgNsVHE2XDZYFF0Y7JDb4CgIhAOPy03Js1Xm93XZ9abAkZtwvVanr8vWe9oLisiPlah5T"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.a2f046f5.0_1583197015527_0.21489586931755933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","@material/mwc-tab-indicator":"0.14.0-canary.024f371a.0","@material/tab":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3qQzvBTD6iLcPS5fr2HYoJfuqmX47YnRQ+3ZQH3lP3ozDHlP3Du2Ji0L9AjE43Ij3H6Fun4vzevGb+rCP8XOzg==","shasum":"89963c9232593e86fabb47dbc63591eec8d83cee","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":68355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLkCRA9TVsSAnZWagAAUIIP/26IgMiGCctl6fIUPW4o\nbOWYxUSLj4/PuzPYn6tqhOdwuF99NrcLwB4/vUE4PKw4M4u5WU+fGeyFdtl9\nAx4WwmXtwcrymc3Ez7Lm1nkD2o5wuc7VxAhpvZeGjiOETJ4vKeLXV/0fzVhO\n4R334lmccaxZ039EdTsh/28y8j95vykj39SDaOk6x/DYBu+IOYCMl5KQPEMW\np1ejo0gpM2PcETXUIRwEyxbFXOvTA12PM2wamGPBnWNooMC/Gai63+gLYCGv\nsZ9Iq3P2qCUvbgx623aFsihKWjVRHOV8VqFU7x3Ui2EgDqGENB7/diOQ3I3C\n2UGPRRr9gLXBtZF1xkS+m6lXN5SXXQV/HXYup0+GduaDwxo4V2US6moSY5Cc\nelTK64bDaiWvXsvkqDzhyYBX0u3teb8ZLoRtmwQtJIYObiEVXJsAA4XaRLRC\n0i4NZdBlGtNm/apU0mj3Ol8eq8YLRQeut8F2t3xqzSZgP/Khu3t5SoarqBYI\neyybLzjteCi9pysNU74Zs/Xt5HwRg6ilokpkjdTDSMb8PeEpy0I0LTlR4EBC\n9Ct1kirnWHl5m4LvLsLDlR+mBp+c9U95L8lKfOYSmEDNcirxHpF6md13/cEq\nndfdX8sXEwTePhEmYesYLwNcpyEAmdAbOXchFjiCPRNqplmEigcw+IZiwyY+\nLqeW\r\n=gFpB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVolsQXVb1rYdWjbTvH+4oTii4swwukoyBAtNQZIjE/AIgA7bDqzPfU6Zjqcp3103pCXj3mZ57xTNuyS2OA5D0Dp0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.024f371a.0_1583198948448_0.21943618114935437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","@material/mwc-tab-indicator":"0.14.0-canary.2f164110.0","@material/tab":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XKzVR6J+lXRUh717i5792wx92eiyXzoWIFOsvdXWMWIZ34T9Il/O1zbE3Z3QmKHaew8cnovJO7LZ/hp5KGnt2g==","shasum":"7909b30e8cbcf8bba6db2831bb3b0a977cd473da","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":68355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1LCRA9TVsSAnZWagAABpEP/1Ly+73+86aR0bi7MBZZ\nUA54Avbtc5DEaqOU3Eb8NZZyjzrbGLwgD9LoZxC4P4UnHXkr2pZ57wORUZ6x\nL9sI2204jELgoi88B4LQZvvj7y/gcVEVBN95ODeH2/y1orsE3/it572Qp2Mo\nBT4Cqtt5rfF80TLQiR8O403WyUar9ZnwNapf/mp/HN7kcjUPpxduBB6L8Zbf\nBjpQsT5Bhm6k2+lvUSpgjf/bT3hyAyDOXWVSqhWLKlOvShnqO4p5s+if3A81\nmHzuWFfqJFsO5MCAj/jghi3kzsZ2gRg+NcjzCYiPfB9bciydyI2Eyt5CwTjz\n8yAkeEB7F2pd36ZePT16lG63VBOWwyjT3OqGtcBxPNHyXfyZuI7Fmmw0o3qV\ng0rS0Syu/ERvBrJcUHkLDNZKx9GZ9gDGc9EAlTn9by33rZJ6eCEAVKJimnjF\nB5e6RE8R1/hnwGEsGJRhF9enx/F/ZyMGvPOOY6kM0pPnKQAJrgRoa+H4e90T\nqQEhsp7fnY/W+Xg0KGxa8SHCcUMBUP798TU0Y7y/vXSz7ffa+cDtX2gmyR6b\npPpjxDCSwgueX397d6PQ2BDvy25/zGIJT4IJeJrG7Qw2DvMxEad7pgKM0tmF\njo8a3NdLvYCtud173EHVqBOIqgUPseP5GOO9+7FUxzYfYNIkea08Hcp63Fch\nYpBd\r\n=I+TG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/tyvZzIJADCoh/d7ZYxfO2u6R85a4ssbhOL2WjwJVZAiAIekJmHD262Q8mrlWHf/xNfDIYecAKKZ7SVIRXIefl9g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.2f164110.0_1583271242686_0.5154730619850765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","@material/mwc-tab-indicator":"0.14.0-canary.edd465cd.0","@material/tab":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-StY4YnSxfk5WthcLjDVmdQEG0crKQ7NlwlKs99lzTDlT3tyocLqPrJyCt8bJyqxiwVG7KcCCXeUDILc+Dhi/Tg==","shasum":"5fee564c527b075385a02a34da789e93888ed44f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":68355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvITCRA9TVsSAnZWagAAJi0P/3GYEUvoicE897TC4Zw4\nQUUN6Cc7CrYfny7HGWfA0Nt3Gj7tcAUv32I362Vn/X4Mi4c0KsU2LJRHXJuq\nsaagn3XihLKzPkdNBIr1YqA3/SMK2sgUZe4sZo8JwTEC0derL+iEeJcbDm8C\nxzgwS5Y2Ct92viMgnzjWxVhKHy7zanH+3TGu5uALA+Tjt4fB/i0u+LilRVE1\nCbwmSxp0EIV9GsRUuY9bENWFVfXgch3g1XPxieA+AVaCqR8WosUEYYzcM8mT\nlJqMNJGKSbAyVB3EfAuBcG58vT0UcYcIP1wvPjY3ZA2HYD32Bef84YDLt8bt\n6atc9gLQpfAxYIzL/9r2lII9HsDN4+ngSA4U3NuxrpQW9y/yMDQ0NerFfdbw\n7JuZqR94HH2Yn3nmgYlvvU4KrzVxpf/LJ8RCG28tQSOGGZBWK07NPDnvejev\nbCJcJSDzgxv1Ysq7QvauICc/Thyo/jGJwChKKGn+EeO0gftQ314tBVXzxJlo\nCA3VHEyKFQe2F+GuMkMY4RLf6Hm9iEeBQROcbouhZA654KEdM/Trsznjnipo\nIBhRIqTpHi4/AN512xjtNwiaXKkT9xGYzQ0bxyjwwNM0rzNwwSvYYKeM7FU8\n5zxr9WvDDBwi4LWfI3UprPqjgV6G8C7NUd+DfisaePed674gjfZS/qvRlhgp\n5m1R\r\n=OLpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPvaQShqJ+jTKgcFDs8SPEIvawvJBB23Rs66UiUxir0AiBM62kVNLleBUGTJBhR70cIgRGnL6/jLaUWhR0dB2c4pg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.edd465cd.0_1583280659035_0.7870697224642249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","@material/mwc-tab-indicator":"0.14.0-canary.2b02d017.0","@material/tab":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\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/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | `24px` | Size of the text icon.\n| `--mdc-tab-height` | `48px` | Height of the tab.\n| `--mdc-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n| `--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n| `--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n| `--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n| `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ahRe5F6iAO69XfDKqZdkLqEmN6QqVu6ZNF96Apm3brcg6zFvrZ8DdjBvX+QCTfvpI5FweS8/2QLk3QZzQYervQ==","shasum":"be306c875bf254ad011b3970398a98cf6508eb0b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":68355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1QCRA9TVsSAnZWagAA6d0P/RaLHW1Y5Y/S/xJ7Jj2Z\nsj+xuCPsKL+FiHxpKKRX3UNELGOpAlltuFbAIW98IY099xU14oySEuj+aaP/\nbgmeTsgECFNF4Rllt0O7YgF9iEpJIXUBDug4Lhx2RdYUPZIC34mn9w3rPobo\nFLOw3LAzWwG8e8xBmwXWZlvWPgtVyXaqfr9oaLHYkNjyAahhSuS5KnznrpzH\nX9OkfIiwKlK2I6bPC3nIfZWLJSFTS/VM2j2Tvrf3vv5QbIwsrPg0/bJQPjOS\n1Mxa3GvoD4cIrKxCia8lzzXiwt6mK5hHm7/1tBNy4iOW8bLBXkEp5K0BkBjS\nIHp4ddN1vRMD+e4bpmpgnyrmZXQQlyJXPIyRkB2ewatT6+8wVQ1UMwFqgQrQ\nowc2tL9klp97kxgixnjIoSv7QgRCBtx1i6zVYhmOUIBlfhQUyNZ3liyx72x9\nT8O81WPrk29RIHnhQoVhWlEQGrEigR85rfAeD0aLlzuHkwOWeKVaJfoFmCtH\nbIj2muBet+HdGliyFGX3L5J1gn9ho9QZ9mqDPMXUZD/Ob8h8S92kE7qUDZrC\nPGZA6ZAUSCbZgmzToDjSljEgaCARVTLfWFug/QoaFvN4YImCO7CIRH0wg0N7\n1k/zXzq6uxh0N0R6oblfWAknAbuKD3A0EpYwmSTWXjth6HpOEVQppF0wYiQJ\nCSaw\r\n=8zDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSTDjZRYYFbDkcM0aa2y08T4zGvKr5VnLi17ihFDEbmgIgNc6Qn/Rv/FHNmSyz65pvSZse/Vz68oIBdml3PacE7sw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.2b02d017.0_1583353168033_0.6672021712694522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","@material/mwc-tab-indicator":"0.14.0-canary.cbdfe453.0","@material/tab":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PHIEPbVjtyFeoNdcVwtV9xCKj3TUNBOsSOTBxTMFt4sRa3Lu/qg959dr7///xgqhnvwUa3FdEa5+65z2JAeoCw==","shasum":"006976d966ec34dbe6f32f908adbc237d7fe54e2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFQCRA9TVsSAnZWagAACvkP+gJ9AXbBrzoaTz5Z72Sj\nmSj+sDI7DbFB4krM0EJd3gHqLeP/Bx+CDjbsPVc5COrGhTrr/Xc6iIESDKZd\neJ8fSejQxqnT9nHfq3GDNaKDNk2q1jQWyRLbR1xpRncAhOFuIjiiFUylzGhw\n5h12x1B957lYNLvcmWexe+GDdSt5aR40rEa6n4A746+Vnlbcam6S7aE8gVxE\na/Do1e2yBYbZrm0FGdkkLoVybPs1z3pcRTA1F9ZUR8f1EuCdLTs1ai89Gp+C\nLSU80zrQbhVXy5tpAz+f/lOcxxR86/MDC8ECGLVXXYlH84A4GBna9Di+TwLR\n7bV4VEyRCIQWbAgQCB8JCBZecq73DKnJIf5jxagtR0umWvyWgotK32AzbhPw\nbqjVMgRmHAHpJigiP1Gy+uUty28D09zCSobBIKY19ndxjg/cKhyKHi3w9CHa\nMXsqO9AVcEcyDTYupWUzAgonpMDASR70bbEEJ5/r2gyRxcUajEkpUG+Iy8fk\nmCSio2Q8a+1BXehRWoX5k5jj0EGvVqFNOoZWiUD17e2OCdioAO+50pKhQQMA\n6wLczzgPxzkn3eRQ5Pt24tS/TJ0b662PN9PR0QQUUKOqJamweSbo+uyF9HBq\nh5BXYMxf5Es1joLgJRKim+yGFGgUFRCRS4GBskds/uOVfJf4E1JAGyNAhgQW\nB+Tc\r\n=xCSj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1LySiks9mmDJ6WkzZTsnT0OUKqI7E/S/fSwTBwp+R/gIhAOyTwgdg+3s/qoRwc2ILfeJOZv4BA07A+5kcdcM90G4n"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.cbdfe453.0_1583358288484_0.9196543266754063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","@material/mwc-tab-indicator":"0.14.0-canary.02aa8a98.0","@material/tab":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2pW2f7Sd9VYwaalJgpw1I/uEXX0dIBepgoRr0V7j5NUGQQLhPkIdL9WThYgDfpVkkWownYJ0yFD7byPe55DLGA==","shasum":"cf1e6b00624e0941dd7703736d95994783340c68","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR0CRA9TVsSAnZWagAArzEQAIRCjD4PtET78ukPxjf2\nUI6NJDX+qn48iyoCiUdgYHPHpUYN43Z5h6xJhrEz/EotC1SEPxM0/FLgoe1t\nN4GAu+wJm45VgcUGDj8I/EGTM8SQpQhui9lRNE6L6KymdOM46HikiWi5U5vn\nO8HGsHumIi29JTD3U7SlW0r5/II3Yaa6NZMtl19viyamvXcoHuJeOoiAF7bo\nTTHOs9Xn2sKhlXKjicUUxCcEFe87AbwxReH7Ka6jdGyEAWh20ihvB6aq0UX2\nRr+v3dZU6jBfdbsl1YhM0oD/1k+SCpaWKuUOV9qTzOCsraYzvtJ8ykM7XTcQ\n8zmEX4PzzxMFoU01fk2lHM1NHSq+E1svic0ofai4k5dmg8iBdme6cNPcbpBq\naun+hZsDwRJ5ZJzc/X7nNwRsfdnlq1Y+bSPYQZ7FiyjB7TO845EtBC51nKvd\nu3VsSInWk41VdL9g67GtwpRGshS52T8gOo/JF34c3V2gWHO1r8Z8A84wrtUh\ncQJ3ngF+JTuHKCYZcyD6OAmRRgSQM+oP4ygnwmDKPoiKyg5DV3mmz/LLJm5c\nrwfvB3r3blclN6qLk30cQchLnHZkzdHdfNdP+ZUdCmwmkMHadbo3EuyzWz4P\nz8PUbQw3YEA8nj2kfENAgw7OYj2zVCbJTUJzqA6Xv8ChEQgo1MLQamvYow3K\nlMdn\r\n=cYB+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAceMSCwu9quc9Yy01S3gRRJGaLPpRwCrxjxJHA3NRamAiEAvhuL63/RZWqD41sZTQbIMCZxf/WYF6SpKxncwJpTm+8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.02aa8a98.0_1583535220344_0.821174123099718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","@material/mwc-tab-indicator":"0.14.0-canary.7cd5aad6.0","@material/tab":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-teTZ0xr+NxYYLcKvhejTr8vedNTWkeLnymMN25JBiDWgD48dQB5pwAV2ScMbMf9ubjumMEJXPXsqSaJ42mTd6w==","shasum":"7ebce52e5a9c2053835806acdf90c519c6369a62","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs86CRA9TVsSAnZWagAAph8P/2tE0e9+gXqsNUY3d5/F\nrfhIT0R4wVj8JEaUISaixoX4rrDOmSquBvAKG02b6d1disdoOWc2jcid/0ZP\n2shud8CLHxTlgZOLH18Yr7qefx4W8MXBxu6zkpV849eCOKnsYHzbajW55M9C\nMYpfle2+w5tuQZ2hoVc4F7mRBR6ig9/A1bkENtssDd0QnPWGE/N6Jk50lRuA\n9B0h1/PsJxyivXfUY+bxkjbkp+oSjp3dLsZCMN4QGnLRsnDXAu/fwM9nIsZE\nVrr+/1/kpOpnc+O4VFHMAQjaf1ACUM7GEgbokDHhMguT+ASQ1Mp30Tpf2aSN\n54F++zvttqaqq9GnNDBYpb1fjSnEh8dz4y3RC7B/6cuVaXrjRawzyq3xwnq7\n9u33ZtCBCVrI0weHHIjVTpWKKL+fzyjwoHW7cJDP8X4rIcDWZe7ryfjPjB59\nauXB2l/XZuU/nqk7e0U0QBpS47xEoQfYvhXCtwHHOG65c0tLtlyrOeSy9/xR\nhRtuMC62fbBXB+zoeCJT/xaRuAw4rGfZ2JbpYz25dRUXQ4tyHMfKm95J3nee\n4oHz7qTG90ntbfVypE6ISBLJB1sX9Astlokotm3MMKMmObJv0DeqngLM0Y+g\nLk55MTavZLhxVpglKDHsKwUm0anXVle91LxAzCczSMXTx2ikhC4+LTV/KS8U\n1N+G\r\n=+/Y4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC943NrPyyoCgRn592+2RO3IL/oWCwb6/Ht7dUMfh3tIwIhAOYnu/uuBtNXVeD43GPzObUWnZ3HknTiWTnf8t/G07Vh"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.7cd5aad6.0_1583796025733_0.9521691229729055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","@material/mwc-tab-indicator":"0.14.0-canary.3a79dfa6.0","@material/tab":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4ylFZj4yL54tj9xH51vVkWtpuNFfngoJrhlsl+CFRdHXRdtcwxEo9nclJ70KhM6iOLcliJ85QvFNwakL6cz1hw==","shasum":"31f0cde91fb011175407849e53c0bca226a6cb29","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHeCRA9TVsSAnZWagAA3EgP/Aw52COV9YElhkrIQM+0\nnf2HXzkh8WLueij93GWP9lyUAjn4eJhlPR/dUnNx6RvyRDN/Fp3/ar0vo4yR\nXnSczEtAsLWFBbkW2f99i7jyxH9v0mRl+TRsuEuMyQLduBggoFY6w+GtuiV4\njaxGZT08qm3PWbh6hESpUQyl7WypdKcOPC2OmnBRL1Pbpn3f+bvicz4MuVn+\ns6t3zT+C8q79Vvq1yJ73tPmb0Y9MmhCdvBQkt9NmZxHPw4FRXZ16id/O7uJb\nRN7Do4obzr8TmnQNyd9DvPJgbUzKwxqQx7mwEmhXSHGaboDTqcFi+p46Weko\ni6I5vFNxL7uwUomFo/8ZNe+3fUoSjlJiKmj0yTFsyZB2aGbDJkv2McS+nmoR\n3bgd+tMpSAeZZ3ukT6/BmSvVg8VXpDXTMAKbZfzlCb1aDIJtUVfKd64mS4B+\n/UH82oDy4XVqPoY7COQOTvgFCQm8eyz5KZcLDnDGRaR7EUOunLO8XkfXwShp\nuigowFJn21/JKBEOMfs0bFRo6eCp+y4vE9dhOSU8xJQfJB7dNSYXrJ7fYLaW\nNIaGpWXqqSzsLafGQsRoE9GJ+YigEWlPMYdDa5C8Vc62aFDNW+d8ZO2TVWvt\naH2xbjbp8gG4+kcKHMCOZWaOr9/KYhGnjFR4tvCqYvOm4mx1iFU2cijolTFI\ni1Pp\r\n=ge/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZmo/ZU+ay02Z5tHGup5tF4fegGdD5+uZng82HTpY+XAIhAKIACqPoTWt7z+C5u0zMFqkAdIIBXPWE15nR/Ek3RU/Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.3a79dfa6.0_1583808989711_0.1861678134112592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","@material/mwc-tab-indicator":"0.14.0-canary.22e0f5c9.0","@material/tab":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-htSUEZ7X6+KY7tyIUKjgIXMKj/Ek12z8D3Mv37yHVIApGYcwZaS8aI1mDw5mRcGZvY+wQ/VsKdL6q6itWg1D+Q==","shasum":"5eacc4f18e2eb5ee52fb18ad11e469c9b086ed2f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLNCRA9TVsSAnZWagAAdJMP/2cAwNQAH/A7Xvg5VS9E\nR6384Ol3D+GsdVB5RShj9etgpXwvy6M25bcKOSDOkmh6dwx6/qCKzKmydi/K\n/WXi4g50jdpYmXr0mRct7FimEjQ8p7B+pmEOe0RM4J7z1d1PTL0r/+FUnAqI\nGI4fPUEMt54JZTzgqtftE4D0Xm7oPDKcCJhYYGIc10i4eLYDk/ooqIEDE2b3\nBTiXq7yeRlThQvhpFe0OYR5GawmHLx/MP/Qztuhj97BCH0ce4bq9ENig6BvD\nmsnwWsqvWlRw+p73mAUpwBE+soJD3M3kO5zuOp5CoTBD1gutv/ux7jkTm58J\nI7CDYK/QcqPooFNbqzqnCkNm2nFnWI0HJc27dBVxJcJOgsO2Wdvi4evRH5SL\nlLtbbR+gt03fdSPdRSPRyhUAoZSR0FgOFmwWav/0h45fTpsVpnvXEnujJu2q\n16analSRYFOXsjyQ3EHhLT9+trLa/f2Qcz3lZqJwfV+3G9yTT+NA53d45nVk\njTa9UNoa647V0HVfIPi0Oa9Peco6MbJA5liObwQV3LImSrJPHoLm/zjT+2GZ\nQI1ukMuouKuHCIxBT2++iigmH2vCkWeFWX4cTUFv15tFtFqhwU09ysIK1XA5\nUF+I7QzneHc96+YYX876d9rn5867HwO4SL1y2cKsHjwAn3OcDmK9jpDEKLOK\naMUz\r\n=6aiB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZPD1eQUvxiH9TATH/b/nR6axGbT1VXrDFkCMdMZ80qAiAsJedW96MdzlczjiHcaPPoy+fTTpsFJdSm7DZ/XXy4Mg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.22e0f5c9.0_1583809228973_0.11477598931340549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","@material/mwc-tab-indicator":"0.14.0-canary.f23a1d1b.0","@material/tab":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MIbtZIgqJirzP6Wg4+hlHvEyuakhZNb1hV63mmC/vGXeYGKYUFMlh3fNWeyvCMqqI3ncNU181YId0tMNjdL45g==","shasum":"dfa873ee0da0a64a2ed355f46657bbcf3534cf3e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":68818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8PCRA9TVsSAnZWagAAd3oQAI/NEy4FZA9XTcBbQIaO\nM2Q5cNs+19eWTTM91+wt4i9Tqq3ysiLIxk2T8Cy0mXkUBcPKj4TvmXzpVRwN\n2ItRD+C/Ecej14gA9htGrJnSEiBUR6CJvbOuyPa2CxdkuKRsi+3WleWnz35r\nZGf4j1eNhpYqaBonOehY83JymTDLrbpXvJuriU9ivtK/KaFlIUt0+Xosu95k\n0s1GTBXOosJPBvZCRH1yvINGoY/1qeOwh86ybq4XLtKAeBtckUFz0VKsBH6F\n1TVByVlU1ELUTDpsdoiRtB+xKKAnsP02VbhcVXJDX1gcR+zMtJlSn2X1se//\nVSL8sp9Sf7bC8TkZxQXyriImdn2hGVvKi209pUeayGlHVV6gHzunKmOBMQO9\nLmrIOYmOx/hAAcd4brxaJQvzK374Td6RK18Lc+pRcpkKfYNY+lgR23qqOgfB\nzPjJE2q+EzDjnHm+M6zQu1IpqxS9LXkcTZ3TlxAtOop6ZWzIwr5i9yPJlE+D\ntxN/ItaXamEI6zycCscvvgy+9y/mqTEUVD6d4GW8bcsGx1dpkeLpZRax8LtL\nqt+3eU59G2sG5iCqyewAu01a2FhxTFm8ku6uQTa0ozGDIxDqn/Q6uhpVA3kr\nUt0VsZxR/xmMXwxikMGnxp0p6t00AcllMjKDaagnDp9ah8ibhmdU/e0pmhIO\niqxB\r\n=AHZe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtZXuPrCAxp84T1RcZqiSuyN34N9HSm9iozqEDzR5tMQIhAIl2KJHcNOlS7Qci444Cs4RW20T2ShpS51RIOIaFuwc8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.f23a1d1b.0_1583873806799_0.3233628108400335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","@material/mwc-tab-indicator":"0.14.0-canary.34b2d69a.0","@material/tab":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4dG89B9GLbAwRDjkucf4pgkEJ2jNSmxPoYs92eWyK9B6AIjIvfbdBH9xd9WUPoSwC718hvMzfQLe5G3dcJpzuw==","shasum":"38ee3a5db5a0a8e041eb09fe6c87a682de931a66","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANVCRA9TVsSAnZWagAAIVEP/RtgYPMqRyuyscckXScC\nHEL+MYhpdhWPn6ziq7wbPccexK/Q/6pjnzISAhe59rG/UiP7I1r2kcITjp4Y\nUOKG8BfImUUnJfPiiosMYgmYAk/uJSYz04CFXMDUACUO3E7jc++NLqraFlSm\n1qP3HZ3W6J62Ee3pJLMIe7Ho22M3Mxlp1G3p/arMqAH9Lg7h4E8NnOvR4Q/P\ngKXp6I2t5ZCW0k3RV9FHpyaLCneM0/6v7YnsFs6Ir5p13h9r+Woy2/VeNday\nD3flzJ1V0XpgQ8dXmJfAsGpFY+wFuhCMzwxqUteRCGPhjT4Om7k+DW3wKy4h\ntXyCXBzvRstR9s8Cz2VkvV2qaImJk8DnA8JWVc9MDBW4558zTw8h2Hf5yT7v\nz1b6vYBNPSPXq+KaI9SnOM4cg4VXtsF2uPmT2YucYso9ObFmiraEdry74pzY\nHubaGDPe7LAc8RGLoZW9cWujjQELgtpgZtUqPrVRNwiZwbGFPhPPxdHqm5eU\n86kOcOjERT+8JZY7Mtl0+h8gb0Yd5+/2ukgKqxwJO4iamiK+qAT0A3gOSphB\nb1RQR/ikEBu2bLLI3SikXhFO3I3CemySyXdB6Ck6/WYLDjvgLsRupFNSZHsX\np1v8EUj4jIXkK6lBlHywLKY/ftceK4RKFwObxAhH9lyJPAnD7Rpm0lsVXSJS\ncM4P\r\n=n+6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVZvJU75F5iTo2sWggFlGN8re2URUOM0cco8WYPOnnbwIgKNQ9wvVdnP9hyGFqXxuir+3KnjcURcp+4gdA5up7wBU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.34b2d69a.0_1583874900719_0.23447553374735053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","@material/mwc-tab-indicator":"0.14.0-canary.dc04abe1.0","@material/tab":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L/8UQdFhvpPPe29lSA+Gc+3vxrexljoxaZ2PZ3+X7Vmu55Bn4SjU4vHPYnZOGVyWwsw9vx2+WzL+NPsaaFKF9g==","shasum":"7df91b9442a2c895af2753a79d2e4282e8941ee4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA55CRA9TVsSAnZWagAApqgQAIqQovn2QOXT5nR/VmMX\nvqHoUKepSmhpeoW/jgnyy0tu8TfvcE7j5ZNMu8JFzpOCiRXSb2OGyy/Gb9Tr\n/ubnGgDTgin/+gUid+Y3zZ7aoWMf3TtKCUGkGsXhUKPIQWCh2mrC0c9uGaVX\nt+riLOFuEQ+7b3NUWT/M0MWpYedlpV1LUdNmLRbPkgAFFpQZZIfYucgKoTmb\nc6MvZnE53l1glVMV8vJrQdTaA0ebd8KvdlIa+BVNXJpMQyDyqbtPGAbxCJVT\nlcRThxqnCDDy8masOiFcryxRMwzN6APSCjEgmGte07ErPnw9AsQaIlrQPUc9\nncGHh6GxKv05knsOqxCOYgKPw/GWWIqX7Gr28lJsWBu8AthmpGCS8CNkQmpn\nlVApQCw0ibnkbPSOeEkRsokfAh+JN26VCymb8JGciE97SrJLcA5To7V5fm14\nl/oWUb1VKuVCD595A0wXVOgHbHsSECo6UUzKcPzy+LEWdz+LnqKdBkANezH0\nG1jjjA6MfgU5UJPC5MOC2L5mXmZlb/45c4fgatItCaffc1YN2qIoXcct1TdU\nJkIL59pqNx4+xGdogu9S9ug0w3Nl/4Dyq1/f3n5zqLE/ZYUedKY3rKQ8bddg\nVenXtkTDVjH8vz/x96JrEW/V2sgzEQTBoUe8sBFBOzTnWmZsa7DVUHTImCOC\nfmOO\r\n=qjtK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7B09jGgRExACVwCdFE/pY46q+87ikNEKKPvDYJs1dnAiBFMHyD1VwbSQ+xZOLYM978tWzvWSwe52KAh7IkFjXZjw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.dc04abe1.0_1583877753174_0.7078725761461517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","@material/mwc-tab-indicator":"0.14.0-canary.04ccbc88.0","@material/tab":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IQ2CYSY/wIt+oFAEV9uxdD4pr+asvgF57xaN++e3rln8eMVSIW9EZ/12s6ixusGUg2be5CL79HxT1kfqUJjX2Q==","shasum":"4bc198a491f12e9515fd3a2a01b845082cf69b75","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI7CRA9TVsSAnZWagAA1TEP/Ajyqbq9D1t9zdq6dQYy\nqWzoHbs4OdvXEuEtnmy2wfy0C9Rf8lt0eF2y/dPsR2l0J/WX4Odb6pcmvs2W\nzs318BTJstzXJFK+2akIk+ZHDdl3/qKhsRbK6GLrQv1uuzytHx/GORG2KsVW\n5iLtMxN4AQQxux41wKds8dPCJqCLqZV/0WdYocXJ8jWJtbmH5hmr7NCh4A+c\nJA3P9z8bNmvkqzNs8Sapp+/Dri/XLD9e1hZ8kiOoswVUrY3XQfs8tO0KG1wH\nbcVV2R5EtUUsSrLOSUWQsasMzv9rwijYP5b2pvVR4XKcjGo9awXcD9E9aTpm\nyvThAAxjMvP3CGTMTtpkh29ee64dL1BORmJgwD964MlExjt7p0SnV3Wgq/FD\n8WIPTKbAJNk6SB4vFgib/gT7bZIrIctjYnwvS34bLXGVYUt/2t5viPpFECH8\nx62nuEYjXtfr/L5toYPUaA2mOg1TEfKJN/eReESfjeC4iv6BtACDxnaLUzog\nacuoJ2eRqsjOE8GGbZMvLP4iqsvNwW/z6sucSy3pQtw812GZHamnoTHpgui/\ng7xONgCE0qnWLQ9J2An4JtKJZTh9n0mmRstcUybH3a9C8w1uVMeTByvgwDlo\n40MSEGWn825kIIQ2VT6sJCpNcBv1aXG5IIcmv77iYsBhjVqRPI/aTSssMpdh\neDL5\r\n=fxif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQmBLiMa4u+ywJX46juxK4Amy5P5FLd/33gyRsdwy6KQIhANM8Lnc4OWMxCk9784tmPiYhWpWM3rjG9s4TXFodHLog"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.04ccbc88.0_1583886907407_0.24862040252660011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","@material/mwc-tab-indicator":"0.14.0-canary.55338c25.0","@material/tab":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UKKWQsGOihH7OYrw1bI0Zr+Cgw4mjv9iN5mFJVuPgAxEf3Ss+z527UbPIAmXqDnsLNoafJvv+e8dzeeZdSSA9A==","shasum":"06a65ca7b2d84ffeb96af3238bd645b22908ac43","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXPCRA9TVsSAnZWagAATqoP/A4w84KQVjG4nJfbiEMb\n/FwnLru0aMvVmCpmQve9vgBefBXNWMxLF6u0ebDM+5pULO9c6BusS69oj2mN\nAT45I/m2L8lLRINEvEhMc1GMY6MSDeFOZJ7ruhvF39+wXvFBDpLIoS1N6jbh\nmtTq7LlXYX1cS0qNXkZ+XkeY3Rc30zxbXZp5Y0hrbbxUl23V5on7fYvin2q6\nNjlqxN7rxY5dgw8cfqV/9S854NbQoB7PrCfkUHZkhSBn0SVfg0J6u/EtqRtx\nVMK5cyoGuVd3tlyPQV4P6Bdxw3Vp1YGmgw1kIktVfNVbKhGs0T30H1MkaJEw\nxLEHAsYgzp21KlSv6Y0OF8g0m8yUzRVuOJMeL9UEZSGHwxXdzQwR81+j0w6j\n+wcv3ece5hjxZqfeQhbz1JJeS5lJjr3cAqNQWvpupronxVJEe9x1H9pIv5qq\nbLqa8iiBg6W+IHMkO/kMgr9cChMkREjKuDRG4Fh2sioPCpB+myzzeqhH4PUn\neLmYlswey/trCLqtTFOJNLuzO7tXBX+negI/bz+Xw0XQI4gJH7FaENFKannx\nlsU7XyPIDfWRqt20mBlofIiqNvQpXeScpfcOgitE7kK+S1rHFHtcKCsqg+i6\nIt/lJghmrGKDWvTdIgtZXviSiaDDnRJdEkcFzCyeaPnmEhJF1dQuqUXdPUhv\n4L0k\r\n=dGdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ9wPTg71lKTKUd9MT4rqniibt8+cevt1QA7x+eGcLlgIgBDv1RDC/rdOMobbCty67yTo3TI8hZnPi7udXzNumJ8E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.55338c25.0_1583908302960_0.7279610266671053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","@material/mwc-tab-indicator":"0.14.0-canary.b7e388f3.0","@material/tab":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-exWDsbLy/g5cbrpfTgQ4xtMXiTZG9d2Pa1aER7uCRHSFGkckDNFYWwe05FboiCpMRmay0mWeNHH3i3+fjhy2uQ==","shasum":"c85a6a84d15fec8409bac19a913a89b3888f799e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfwCRA9TVsSAnZWagAAiQ8QAIXZufcr1GH7RHkYVCtP\n1Ymu/JrjTTjK7uBAJX2ENUjlRls9rxpFMfF43/flfw8t3P21bvFsCEUCzbUu\nkcLSr1HryeCSmyyoyqSwMyMcdYFK3S52CnDes5a27abmiXMMphQ4XWOVCZkP\n991sOqKnHOO2fws1wiap9BiPHwob5ZpU6cXEj9l+eLR6y7wbtUv3hqntDev0\noDNhTsnxQQMJ3JR2Zod1bP7MCgLzHNftBlLY2eA2kXAttpkkbpAviGyhIj7r\nXP8GodB7DChs+3eN7nYCxxeM2FR1wh4YZIKP8JVfT/uWsPC7D8GV9tRuGmJe\nY8HZdj8EJElAQIIw+AIOLlHo8/6oRfkCnZdl4k4uOoXDU7LjoL6gQMllBC2J\n7z04H190fLDVuvV9dXDHPylBESjb4y4/9D2Kzb23SJ5KbzyHj40nwv/g4eLL\ngLy+ALiNLw5WxmvSLacC4x6ERQXPyZ/+l1uoC74vka6CZu8WtQHcQMY87//S\njBqL7DM+E6O9j+QiXAFKRXNi4PzhBt5uO0fiKdcVJsSd0SiekFTrjJ2sflC+\nlCwYalQ+STQZOU+yjFFW3lrh3GRAAn9DYdd8wgxfrQc1Zq3lDsY2A9MIWXnk\n1mm1S9NSTyNUHUeQBA3qRhUjjQNN2/oDjZAW4Y3PJljNDpCqlC5DxHkedD85\n5Xzm\r\n=mJdN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP61thcg0JQrNSx3qt6hc5deTO6MsODzeSl/0korZ/7AIgf/49MT4WIdXqDYp3g2W8D8vfEoJLwnFj+ZavP2nHyWo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.b7e388f3.0_1583958000433_0.7409743851962314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","@material/mwc-tab-indicator":"0.14.0-canary.b3211481.0","@material/tab":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4OgurZMWyEHNHSDYJliHwvuLphcbCJDxHL55D4debViJ6YPUvgtAiNnc2xxPML+BAnp8AhP4izh76fBDbTSqgQ==","shasum":"5787c17f8439c3f6dfde1d14ac50de0d07bf3875","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjsCRA9TVsSAnZWagAAUB4QAIH6CeOH0qjgpXcwpqBO\n5BotOmiL3Z4e4Q6cgjQIZflpc7myHjnAMhtI0cDA4qFnyZyw+y7Ck6P8hvnJ\nUUi84dBBcvFSQa1sDr1cCwKWokzI0oPnjgQoZslJ3PvG2hkEmDRJh3Tnv75e\n8bRE9RcZt9zHCtkWMpdrtxbYpgihLv92o/mt+4HoFR1zA7EJUs+kQGqjbT0J\nSmaIggIpX4m9zOVBYp+ZTsn1kpiK83Hd1/sYLJ4XagcE0E3mzrKaisLJX5Uw\ndF/RoJGg7f3IHFIkw8qUrshDXJi0wCyLYGjckHU6tkVwnQOdCGu+CBU3Smeo\n2UPXdG/u4ftNgtI3sI4isnFe+BdhAPPMDX21nElj0PWTJhfP9wv7Fys2x5xB\np5O60T1j0eIToIzvKGCA0fwJnTAAYnpiW9dGw6bKKLUzDu7K2Hrpdkpq9Zyr\nRY44KttclXXcdWSKDLct9b0LcdVhf/pvsx2KEfXQhtO2jYzsksINvOky43+f\nym4JoSKCb0atFKRE8ZjMh1avynlxM+PtFhI2tXmv5xfD8GCELBRoCeHQF2rp\njnZY+UujQxSwSkukBowg9FliQmQBv/Y5N2abu+0+FDNX8dd7PvN4pbvgmGBs\nOjEw31jm/nLmTN8Xw/mJv4IRYMCbx2ZnnxXhnxv4mpX84+HK9V29fqE45LP3\nQR24\r\n=O9Ov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS6NppIhCg/+i64CIhB9w7mBhoH+F+ZWbCV87GttLjmwIgW6SRiRCL+KMdxHnuUYZjvZORKLGsEqzDLvQCJ4H1snY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.b3211481.0_1583958252138_0.5798230607839385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","@material/mwc-tab-indicator":"0.14.0-canary.0b5c7f23.0","@material/tab":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CX4s76EQBKMhOBpQmGu5SlCM9hBhr1xV5MDl/X9T2o4TETXnnIoErGuP15W8u42JWp17/LQcEbjF0kJITg9L/g==","shasum":"7a8b1631ac804ad3fbe1ce20aff1744bdfc6b9aa","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3+CRA9TVsSAnZWagAAQEwP/1o/KbVW1fJQ+m/9Q3Fm\nQrWsXMgGq2iteGvA06q/97bfeuPwz5wtH9S0gMup/fBaMTqluOv4IXoOYbXl\nj6swkJu1qWKqMvOi6Ti5zRamDYxjWQu/u80nVAS5YYrqRhzdfuTWh0YBlSn9\nt5+zvboiAUb4eQ7bnvPQxZUyRPBirsB+f8k+gOVWl95IEPdPJ3o6Z7dpEZO5\nHMNZIkL2cYFoGtmUIFguNMBdiUTb/4Emw+wiRaFdFH+XTaYtFmVDaKNsExbV\nir/tTl/PJxNcZMT8wolmjZSF03KT3A3Rz2rhKMqrFTNc0CS1+H0IMecXwYIg\n7vRyBPLUUiiKl/w7tZcPxtlYBq0SmzsL12Iz+2nZf2QBx+RsvGlLio86qbw8\nLJHz5dyouvQFERy4f3/phU/FXtFJGYIbWNMG5ew6sC3nTBt99LvQCwbYqqOQ\nnH3c83etM05n4RBqXQUEETKSclBU65htApBBaNkt4j0Y14kvislJB/8S2rWz\nf1rBGoTMejPw7U2o2weunf5pgTgab/Xp2bHL08T7sdD4WId75FU0xLDRG5QK\ngPkb7OOgszmB9EUhyrdzGbpRngB1uAH9gaQ5WI82qpuGIbsOt3dTW3vqpExU\n9qoBmh3OwtiLdls3PfZjCkdj/9cOjzpUUp4XW+B7wmaGkaLBAl06kdq2R7x/\nuoHt\r\n=KvxW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIET0oFks81LRsOq4W5KRJwApj/b8TcE3iwMKxdwuA9FcAiEAyuaKD1pLrRYs7cIlDtpA5cbLAOBDm90RWEaPKduD6Bo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.0b5c7f23.0_1583963646217_0.5406490196478704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","@material/mwc-tab-indicator":"0.14.0-canary.6c0f0b27.0","@material/tab":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CwkNaLF3vKu+N5u2xUO62lgQWBB4mqquxn01xKR+3R7qxI2NR53Q9OPjZ7bysIQeDX+t2Up7+4z2rPjXk0bPfA==","shasum":"82ce2c46e743bf189c969981cae52d82bf23d415","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbnCRA9TVsSAnZWagAAV60QAJ+tJEG2idL8xvxF5zKR\napCtw2Z5PkqjY1/laC5X7hinEz63H6PBOJqeiopZTsNVbNYhGzc1qdWRpcJB\n6VGrss3/sxUwzuGLf+YLgbo+HuPo2eCg4yiM1UrJjjBSo+F8bFiCqaDUddz0\nKkEIDosSzwAMfuwKT5uIN5sTRVDMutFl0n/z+d4LO09C6tkL7mgHaZiknm54\nGfWua2MrH5atlE5sMGMQf37rl/1hTtdCPdND+foaWszr2tA13N83LV31f5WR\nus6eKKXlNJ5ZZCRXgqbsTVHijI0nByJaiETVdUCfHLTQryDPlSDMSlyLytEl\nWQYoipvFPDSCGSjxqpGKHCp4Vv+BiueG4S0xs114eAAYbQsytQBLNSBUotko\nAkKnlyzojvY5MG5jf8Irl68RkU91nbqeYcdNoFxYC/24wurM+5uNNDwLJdLE\nW9uhr+o1aBYCrRieQVxHbGVHS6wFpz/3qMy5Qw0O2qe85ZUByb7uwdyFrGgk\nVeUMp5CDR0oByros7TzFuiqR4GKd4jqRIreb7gsmkK1SOFpdeU9UFoXJMJU/\nVMkKTjlzxsWZDJE6wNtb8pYN8Vr9f8kyCLqj9jCkrWsmcmuQ4XkfPuhQGyKM\nI4TRFonPBp8GOPG1rn09YbKRIGiNCnbuEJdlitbQaxMjLY1ny7WYKxz2rLZc\nApMR\r\n=LjDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAGfqkWJSOydTH/8adG0vl1eoJ7TuGvKdt4xlSY57XEwIgWvGBSqV8hPNetrRnn02EJ/khfaoMkRMDJxpy4ywopQs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.6c0f0b27.0_1584047847364_0.8775072226829976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","@material/mwc-tab-indicator":"0.14.0-canary.b6c53425.0","@material/tab":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X/nh7oA5aYIil2Hw/6faNJiF1MSQqzhDH+Xzs7wsxHk2FjHDPSXHv6+Dypqg6vhNRubvQnkRYCA4opgNjryDgQ==","shasum":"bb4cab25115e1970d8e44fe542a903a0094d7fa5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":69460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sGCRA9TVsSAnZWagAA5SkQAJ9fG5pgeKuUn7QXNNv6\nTkLyq5IIYb3Dp5buO88/pYMiMXfKO38BfJ4SRtrS5SFqJnr2zAMlrbWb6bQR\nMdFaxy1eS/WABV1S4G9YjxrlCcoAdq70+kkuxmC8umEn9GPxLlEOmyPOewxo\nhsyfOX+yQ5VeNIED+Vb2Fe8BbIhLDxdZoRMnt567W53zrqU+we/QsdxUUbga\nEDjE3AdOaAOyGcRePPp/vHt1IkQsZBuqmW1eDWwHMQ46cs9VfgAsvexqDzw+\nQXIeYcgtb4wqSJijzdyuWuwjlO87VHy0rgTInmpEdAHt+pJKWcS2NQhLAqtq\nHXjkf5rbfvNqK38SOmnkSiY3Dx2E+E4JDU1gF58wCf95oXSOU+boT/hOCYl8\nRj8hmIel+UaD+WAe4xQe8jgRk3WGonK6Q1AOD/NDHRrtsdtNfp9p2ZsSkJhW\nkML6Kyk3O/v+fWI1uq9wwn0a3lFwPoYQ1yX+W7gWvfM47++e7WienPOgMFoC\nnfDWG7h+oB+EgYvd/3PS1vDjM0K4DACL92bk9PazudoprRGo0Dd5JqFTzBhO\nPVwo6ppHk0ie3uDpQTE7bCmU/JWBYzHgZaWiYpOTn7Ui/FMpYgFU8LkAibb+\nEev/zZ4Q5oYPfqA2gbq8GZqeUgBmrts6uM0utheTlZeZJDBtZLOPA0o6XnlG\njlu+\r\n=5q6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPC5xyiAeoMJYGVJqREHrZCQSWWGJfApBA4dlFigaAAAIgSWXU9VO5putrAJe6Emj54VRGUGFPQvGxVcl4fcKHrzY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.b6c53425.0_1584118533621_0.4106874628504016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","@material/mwc-tab-indicator":"0.14.0-canary.306cabed.0","@material/tab":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TMBXjR45uDV46cJg+aIgMKdNr30t/0KtNfrO//yIVdza8APUp9U865LCheDl7wKP2Trhk+PZ9XcPD0yHNjjPiQ==","shasum":"6c19e7744f2f43b2ce5f7fdbbe2304f3fc0e4c24","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6FCRA9TVsSAnZWagAAUCIQAIqDprCnViCMMdiuIbef\nIik515J06zt7rE7p2VhnxuvB3kAdRdJzLwFH22QdzgN2feEG3rPkirQ+yknF\nb2/x6kZ+bSc4oXpn9J4ks2/kvTgHMmIPtg2wW90NfD10OnhgGYNsoPZu/WIk\naOAS8YxCkIoJhdydj+AdbjL+KnW+TY9ng7ll1mwpjslQlE8j5+5q4ILAFKS7\nDtt4zLd8TYtdHmSN0IutZpDQ9Vqu/WNSOmJTUJGIIuvFi/733cbc771pRefz\n5Nq8rtk69zUUKmuXyLiZ+CSCXU58SWhwCJYUgnyK5PuxEOYfEU22+h1ZCxb9\nfGyx8XT5hd0NSrKIUtZA5UB/TE21u2EkSczFB4Y/UcUA2Peuh/YQAU+ilaJH\nLbFxMDQSVgEb/9WxaFtvCyDCKkfKxiFzFpBxusR4/9v4mLbVo/kBqb5bgD/W\nkfaWkap0YcCIYhfsejGQfaqhmZ9ieHyu+pc5NaJJQVsYl9qDKuOoKU91suIa\nvl/pniIxfAXWc/b5KC5ElxpzMofTvfd7BAsHYM9FsjS7EybXtQHNqoiwnTQ9\nNAkf1FFm4OCXd5H7NFJyqxRXlVEc9uaD67jFqIj1HwozNOx/HWfzv4agFQF2\nXyjN+e0YH+1VffpgaYPyTPZqZmF8l4nbAo5/9UpFm780JXtt1qEf3a9Qk9jX\nvywi\r\n=AHOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdmPvc+QgmKENLltvCnMimHTRhI5PDJlnwpoOXYaYZsAiEArDHBiXZKxV/jNl2B8mBdXinlXvd7HoGoauvaJLm7SHQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.306cabed.0_1584479876983_0.2975027225732354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","@material/mwc-tab-indicator":"0.14.0-canary.4e250cbc.0","@material/tab":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2xv06uMKWseWJMO+SzMZNS+65xzd89bfHgKvNsFzGPUXp+r7pf6ve0WHlTHiOp67/aZGVpIQfvNOIKb4olh+4Q==","shasum":"2be388422ccf4ee9cfd661349b42c2e05b7db5a3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/2CRA9TVsSAnZWagAA3RAQAKH1lv3rwOVJsZQJrU8G\nZhwuXS51s02qIea3uzhw6sJciGmbran30c0hoSKzIYvd7Zqt1JAbFaLzlDcV\n9PCQmbf8XqmovW1N+c/DGm2qHz8+xd/uiX4rnRwmdG37WomquozLdg/L3z+x\n2KKis6xgro0AXtq+tBx+vik5AUKBtGkSsmLZJdOTKHijC8QT1RtXYNqJU+9R\ncT77Y4NxOLpnsfbJPiG2OEpK88D2qxPxHsbugHBYtbjlDfiOcdhw6owp8AqA\nRe3ahL5GH/Uv6CtSwsi+YVgPyAT6zz6Oo5gn9idvjS6lcAo4f0GDpnR5QDs6\n2dNKJLq8cZeOYLC6ft5Cj8R1+RwGIRSbabA+LowZhO28HVKmn3Am1ydFAc5o\nYH7gfDfnT27TkxqeI79WqDR2vpbyPyJV0lWZ7oALoyT8t4hE4CTs5GB9bvnv\niFMlZweFKlFxEXckS5dESSXPJg7AnckvOFm7hAHpFh+S5M02GbxbOoR/tnBL\nfeWiSJ3egKp2jQhcuH18Mgk0Lagpjjx3qyjsQsF1Kf+UY7t2Ap3djnHJM7pw\nImGPph7NH+INhyY/AnNGH5ZEFKMBoVNT1tineh0Nk5kFuZFuBh32MDs89OI4\n6cygi/9b1GI/e89VVJUeH/YMaaNo/UWxCFI/FoEEAMV3pkBF8pa5WpxFhFie\nHfSn\r\n=G7lf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ7SiLyUch6mvl9W0hI2jKQpp2rfKUPvGuUWSzrRQGeQIhANO/oT+vcdB4S2+uKF3Bg1BSmcr8HsXvV45Q7+TAJo/b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.4e250cbc.0_1584480246207_0.4984343217101457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","@material/mwc-tab-indicator":"0.14.0-canary.ff82d9ec.0","@material/tab":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-D2WeSaEMncdiQ7evYBJNxItURooc2jaCy9gr4LZQUoFUXWDalwEav1bPu5Q2jTXUbQjFjG2ozrl6aoUHiFWkfQ==","shasum":"18dd1cc3ee23cc7f126ca266183e693c02112bf3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZLCRA9TVsSAnZWagAAZkoQAJLA/KV0vQ2s2KyeMjGR\nCGse7n6OBj361dUP9OZxkrebDX8GWeaYlXRS5PH/yYosvMgoNmkV7Cpl+Jq7\nqNRlWJ4Pm6LG8ZepLJeDNmgwfHeTzNGB3827BNiM78Qx1MmSlvO3IbfjsJUM\nxaglS/yNJVA3Cwy0ddkMHpFpG+s5jDeU6MtNbwRQ8x6aIqKlu08sZ2QEPH8v\neONYDzOkrwowvCN7Uz8HKgYnpExBAV8L2I3kN9jek6JYB7wpWGloX6/7Cmpe\nbs7ORBe5brHrqH04tQa+dU1kLsJg2AoOdCRRmJL5g/Zuwv78Ptb8DkvU+mI6\nak+VedQ2serX1qYA0WKzqLO6zogP8zyJV8ymlAoLpD6+/T54zlKbLtDg9wtv\njZRHeq0bGk3ggDgLrZiWwomNKTeWZmYf2Y9wT+8W6/hkQWVsjBT4t3KCzUid\ncUmVmYsZbYeeGaE8SKk8Co02liLUxlyEsMfjPiC9Okf9Zvi70aS8q4sGqcBd\ng0G24vGSojqsZM/T56r5uvFrOEsEc9reUMS1AX87oz7YWsxWc0yjl0YozNqZ\n96I4HeL1AuEMky/cnYptGgqP0HRn5h/PsNP31L18SYgng+4poxNLAMSyddjK\nuy/Sb4ZB49h81y4QMSsMqMNPGSqEm58iaEQYfuZXEbAx2wPFffOvs7zvpfaD\nmC1y\r\n=Dh4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLyXAMxWObwLRUQE9pEZgu3tC7NZlzK8QbkN60X+v/VQIhAILDo5NKUxDF4XQPtuTGpq9bhh4GSxS6IOkC//zSNS7C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.ff82d9ec.0_1584555595175_0.35342948868795476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","@material/mwc-tab-indicator":"0.14.0-canary.f50f48ef.0","@material/tab":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WMpUXRSJZp1ZGOd2WfNbTjKzIbi3BOKvF/ofPUmQ3ssbyiWoIHGYO4bjVHJID1BURD9h9kzpv5gkvM1SXQkuug==","shasum":"27a45e7e865511bd4ba5a41a941c6855d04c5a53","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8ApCRA9TVsSAnZWagAArkgP/2NKcKopcwu/yLtkdoGy\nLCD/BDxieohGk4+I9TCMl47uht30mEfHhxNF4WuA8RbfeiOwXMDXanrTz2qo\nPkdm8yueBZ2zlVWjPZgM3WAiMI+X603NocY8KPq0IgOx5oTZZW9HxZkNih+g\nq/cH6WTelK1570adM+HvIMkFCgS+MrqKYgEDv+PeW8L2InMRazgj/cDZ9in+\nEzAvV45FS9KwWYwL36+pyr1Q2247Vtn08nVdx3ILTGoKF6ctQW1/jO3zYKiP\n7w8REucLKcFLfimzEzz8Lp7g2VhOJeg6vGAGy45MYkSyRyra6VDfM/IrDTfu\nDTSYUDOrBMBbo7xmTIBkcypYiQce1yRPkYqqoMF6vgyJQFdNXq1ogLQP+Fci\nquY9EviQJ038OwnyD92WuW6Rwd8DZuSoTEckogiVoUeQZ5G2EIigMgf3AKv0\nG7ad/MO71pBEsYHeoMOsZ/mHpBclN+ehqVtkmPv56wJF0f1gY3irmb3d+RD5\n5eefxOWaMEdPhzp90y0pS/ITTulVcUQolSOK4YcsblPOw/n6Eac0n9npbWJy\n+I7qhnl4WfFcG5Cq5vt9CDhzY1Qyw0gX8mEQ+1rjI93AwyAXUYbZQggu+Rno\ndmPLe09zK9HUvnQBOo8F/DfVAK9Fmup3Mj3FV3jpw8ydiuDHhuZrAocpvfUp\nAgMf\r\n=4cQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBQIUfgQBmzr4/65qPTO2y/cL+XbJYEWGVAkLEqpO3EAiEAzghFC0/1C8LwajfeUVpmk37URP76UyjTFLw/3u6+z3k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.f50f48ef.0_1584644137226_0.16917497199916842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","@material/mwc-tab-indicator":"0.14.0-canary.134cf877.0","@material/tab":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WyQME8BkjZRv0WUh6HBZeiuwidilaS3HTIBxRQZ0xvUcK9gVSph4veaoc91HE9PDzXrq0AvCRG2W93MRQ8NoeA==","shasum":"45883f78731a06cb4ea4d9e30a3d56a2a20ed186","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h/CRA9TVsSAnZWagAA09wP/AgEuDXKdXr9q1msZ0ME\nW8tPb8Gd9zX4S0iW5qkMmp5q7mXmPFa60yu9eKDz7JyS7V9EtlXVV3va4vaP\nm0ihxsibmWV4vpnGf2G30VPR7Pl/Yn12Jb+jte+3bungxZM53TD6MdxlLAiN\nDmiDZWhOOVYJdXzQT8ftjw60bdWdZ/132ngT0x1IrpfI37e9HlhHHbBmJAEG\nMhvGiMndYqUkdE1ZsMbwMLe0O2yzuvole2hleT32Chc4XNwv94Ta7u0nTcOY\nX7fEasA3nakywJvUffQaM7pChUv1HrPlORJ0D74Dasy3lDndV6A0rREjy8rD\nJSGtoape7AHsZfvPSlLTrTnnThz8OERSrVJCqcRNcKvxyWFHwOJGzCxUQpaZ\naSScmOimKxKu0l71BLsAS54GaoIsgHeiLzEj9o1cH5G8KqfmD9zaH934gsEU\nuNrUdZeu76hPKTI71Cwbb7sNdmeclel64nOz4MCB8IVCe0+cEDDWsiwuHvTi\nsAsfn55a1FyiyhmocDUGkGFV/ZgFhComExoD3rrE4T19O0wasmT5z0lBvIxG\nKHb11InuxMt6D4CwSFyuNVBTS+3xzijo5ityt7vbKHXS3cfbpdAhNxPQLmk5\nT6Da2yVM5Vnr2uEib4YLDt5kCAtjlSUvWGDgabOltBviA+rxSTXy1j/LvCVZ\nzx25\r\n=lvE5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC23M0nUdjTK0Ehm7Mr+CGCgXWLyp9y6WM/X+87B/QSSAIhAJjzzCO00G6LXUZ6m5cskYVl/3vgdnCzAINT7e9VW/3e"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.14.0-canary.134cf877.0_1584650366875_0.25087322872427587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.14.0","@material/mwc-ripple":"^0.14.0","@material/mwc-tab-indicator":"^0.14.0","@material/tab":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-Y+ulyqfa+SgMcgi9SrIk6/JDtkZovk+hS3cylMYbccIRprmtBwCSMQpfYJB/ksrO8ch7MbnwZVOaSjE4qbVxWA==","shasum":"9f193fddeb6a7d032ae2d058ab33f854a2793d7a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.0.tgz","fileCount":16,"unpackedSize":69551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QNCRA9TVsSAnZWagAAu7IP/R6O8CKDTsuEd11YjqsE\nTxyBe9MmIXJ/WbYj68iQ+7TI7t0c1FkR2lrbKmv3TcV0KWMIqYHV9n/5061B\nlrnFUp0ouGON4UP5tTc/qorSeJefvn/zQtUCb6LRKHldkks6DF3Af0ajcEsA\nQzc4Q+NhiEU6eHQvKp92xoyJlNogJWPhWLSt/y3tUp2WbEnmdDDBztIuRzrx\nbIJxfjN+ve6NfwuVvZ2Cmk+Cc9e3k5+dvOxjEeT7xnzeD2cw5AnEFMYAYqfA\n1KiXn3yNPyUi6lCMy8jfDhueYfDgDN8GR2G+rx+2E2SBmYGWIDiIXALmip6m\n36WTHnCGueU4vf0wnjHPunxhCMqhk4t44fD64eKbTr5pWd/0X/KC4uS4TXz5\n4X+fsuzbU2L2FoCTjiERuTZ+N2Iv+BUgMNCkeHBrRCJw5lDKPlOU0HQGrCS4\ntSjNtnYlvTI3is9IXuzXRHy3E1sfAUm/h4xSR8Bsng0BDtaGl1pxT5AC7aJD\nZsIcUJL54eOPepncTzN0JN5DkyA7QvbkrGQ87TOeToh7MjqM2GaL5u106Hsb\n3Tnu+0dfnj/A3vQpho/4nnWWqftzUrw/6evzMovVk97yybrlFQt5ZMd22Ocl\nCwI6/QIjh3+1ObO0rhxEyoBDzeQDJjclUXqd2AGh2xMHbcNB/T3Bbll+UsVB\nzqLC\r\n=DRpw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBFpPJAnUTq6gVHySZaJLIgPLkf2rGGRENd8M38a/9DwIgA6xJX3VrPdaPaZQjBLMq7Q/OJzoTY9MbRas514+uXTc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.14.0_1584653324675_0.054989083159083574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","@material/mwc-tab-indicator":"0.15.0-canary.2c1a4913.0","@material/tab":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-fFXGBtinRVhRGUWijMDHay0E49V1DVRjIvkqKFfYfogC+feVQJ755TkmF2Xmgl4odr7MqM79QN/B2QYo1ul/jQ==","shasum":"26a5186a379d6f8903fe3b7449da1c0221aad821","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mzCRA9TVsSAnZWagAAEo4P/01cHCYStnCNZBH1vexB\nonDJAL9GekNmUVYMikZIbeWoEoGBNkPcI4WdgZ+dKLbxSamoQ5vQK8G8zqk7\nNSkiuAVwsLQgC5F7RWsqynqZ1q4oJocjAquwOR+HAaESMv0zj1yzBJThJ/ek\nyhVmMSyHctnuv7T4Yu1jevJ/T3ADPRUmMkXlzGjZrBvE8R4LknzAXwrnpJY1\n0cjoMUzmBfl9P/7OzCTUTRNYkRlJa1ZMarGDwOE9WBicnGwih+DVTUCZbkX1\nRBjUVOq+g7BOkS5oOV3n4wYImJJYFdpUTX4XPXYRtYiR6p5nnux/+/yZ3zYw\ntrBrsInqw26CJWWxYz2ctG3D7eab5Ok5L0k9eSkVFuaNGa3/xEl37QjkknsG\nBGpI83oanePiq/rtmYUIvyOdE5CaQCbzyXiggOinmhKsTQwWqCzo5BqfVpeG\noBto+DZmh9ULacYFsM1/X5Zub9XV8QGnkI6r/vEFEH4hSE9o6rerI4IWFxjA\nTBgRUUk/jcP9H7scpp3/OCAgv6jBi1us4Nraw+Qu8r84EbOmEbPXckPrEPv3\nBRJf3LImXNnZKP1A73x4R/OK2V9GL4bfcgRP8L5efUc0VteIkHgske2lbhRQ\nkPMjJxKDVNccqqo5GUeRg0Ll85QvXrVHMx6O/N6nmJ7n+cv9RJZsvZzaFgfL\n6r2X\r\n=0g9r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG01ssIpzOz90aGtGyITogjEaiMdYsfFWnh2MQqsfZ5DAiAJ/Q3tm1WYaFCHRDH8W5xhKk+WaY8uRuMxB3SoGkFYfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.2c1a4913.0_1584658867168_0.43171569126730835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","@material/mwc-tab-indicator":"0.15.0-canary.3a6e481a.0","@material/tab":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uE9FArrwFccpvuTqLCc0U0EqxQQRZn8DvuEwZvLLp7E+GPYVaqbkhYW/KMIGaxIsy3cF+wnWJoOg4mUfTJXgEg==","shasum":"60da2c10d0049071635a1cb2f2ed77f61115f7a5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfECRA9TVsSAnZWagAAeToP/iejLGlUdo8bpRoUMi77\nQ3G742oyqgz5NKb2R6OcCmjjqkinXfigWRz0to8r9mdDGRFi1Dgv0t1Zz6gg\n3SsVb8e8HK0MIkmeJWyJS0x8f82uPT/avAUw7p7wYXuxZFb322qJUCEC5mi0\n4OdnDDutEzDEVqjt9RkC2QHHsAvKv9E7F3yLjyKyvoGCqnJQripnwstWCTgn\nWIDG+KKv17F1gpiLdSgZMyYRHsRucx9ENEhqI8iCCe+YU2EhTfXQZ5kbClc2\nRLC/umti8KAxsjk5LitMXfwhELibBL2eMkilw1IuIhiTtDjRPGqpdbBcF1RY\nn02ju8bK81TH0gD4CXwki4pA7vY4g4m1UgljWY+S8KqnvXMdRA8uML/aNWjx\n1OD/Eqta3AKDQ9cxtXfcMHiPiopHBBrOlbM621EjRz7f15BnL94Db2EM0bWU\nzd4GkqDBlouT1dNMZujfv3+Abotqz/L0tyiGjyATZv/i8I2BBboCF752x+9V\nC8Sg7lEIo9nUEFLWnOjOqnmxKoJF+vW+G6TbMnCUlDrnaxLN6xYhcVOY6QRY\nji0sig+hYXVxaKlIHKstWPuoY1ZFqNJEFIjnkQtBoiafy4jXgzOAzx501uC8\nzBy59ym8bMV4wmUbL3EQdQJ1YTQh6RmaFQZp3nFUh97q2K05BkFWADn948ki\nt0Ae\r\n=O1Z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCL+aWsp+XplXKmfMZRNahYJDS/uAxOajYPIseeiPMnAIgKdspvnP0T1IgYFDt1XrzNUVyopHwyB0SKziTsJi21RU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.3a6e481a.0_1584728003696_0.6533221738025756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","@material/mwc-tab-indicator":"0.15.0-canary.603d6eb3.0","@material/tab":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gDGXlbRpRAO+fm9IwltOMOu5iszFt7cgxUrj7DiuW/CMpdWwwzzRKpJJzHmGkmzw6nWKiz6/nDRDQ01fejp00Q==","shasum":"4a3038ef5bf5651c371a9c09f560865cb2010e6f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdGCRA9TVsSAnZWagAAIiAP/jrgahNr3FhGAsg4JMqz\nfFbyxuB5J6pGmw8EnR453G/pG0wSRm7J4/FiQjwjSNVlhVwjBwUBD7f5NjEo\nMj55CjR3IJeh6VzKAUr9BSTK9ZciqAzXKEfGcqyH4VLCOFZJvc+Pp7R/73Jn\niyPpP2CIAu+oFUC1JtIDY7pINzOTq6ZxMonRYPq7JD9DQG+Yq1jvM5xvq7pH\ngeVjD3nQk4AFHVLTFDB6G9Sw3c8VUudrwZuZCVBI5XEzi5YXjxla5M6Hrpv8\nfK3yzWuNc4j67ciQxoLC2wX2cx4efvOw+gWnMqiXA00L3uJCV9/iGHYV+sJq\n8/KxRfHuaNRsIC9rDuUxVodQ4fMMkcO7d2fH+joHE9q6dIZciVzVtM+UeCaK\n7z17+BDNFsk2EzLrwJ6eBvrEtjXEtJXbCNIj+Q2ncH7GMaPfdRKMPcEnyasy\nK8O5nBrJMnBT86yWB1Wy9gJwqnaA9T9QCSLmVqD8coapznkhUoLTZlWxFGTJ\neC6fXXzliMTGT3eeNup/d/M269IsBy4ZbJaeBu8qtPtiLKSUc+8o2Sm1+nO7\nGZOSi7INAEvelS1IdMJYQNBAvsBiHEnhKKbRxlhM34LdBUShL/+8nLzbH+HE\nxvQWBI758y8VdwPQInl37bDNwV3zEGz8HlPXO7MVvw86x2SW0PwZUv7J1PAX\nEij7\r\n=VYak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBug7iv7jlVvSPjvzaYkQ69BycsaG+gNQTCUzHSF/F8GAiEAy4x6yQeCJcWNsJ94bWTnzW52CbkoDzBeneVbq7LvkQ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.603d6eb3.0_1584740166006_0.14521226804004028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","@material/mwc-tab-indicator":"0.15.0-canary.05c6a93c.0","@material/tab":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8U4DI411WHmqcHkFmvzIIwJK7s6bqCkVCV31CzeKn8JjLeHf1hvxQKVS270LwcAMP3mGipu1pEQ6E+AbCrNE6A==","shasum":"b138822286ee5dc61960fbdfe87e59bbf00206c7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWbCRA9TVsSAnZWagAAKi4P/1QHS8x17Nu8v9seJDNE\n+4Qt4e+JxTDITTVGb+/Qqnx7BK/N5+rMtgfIxrCQauSCkfi2cKZ+QQOmmkaz\nVt28B0q9QMh2byMUuGpH6Wmo461OJxhfOd3d4DC37tQZmbQqXkJPimLcb04l\ndJOJ9UZOhjwDEyCUUNZgaU9qgt5h8GnMkCuPDZcgxg31wHOuU4VitMDM7cGW\nftx2SSMJpTXAY8qgLUdcJR9CtEzR+1YmzrOoR649+guA21vIj5RkGgIDlw/5\nyJJHYc8pZ3b54lQ0hAxu69c2pJaT82Xg8HeXyo+IfewjFPW0DGHMzyAzChI2\nF9VZAo8dbbn47RC4wjtQxuTHEbfwavxG2Vh6+IKe+PhH8L3Zl0/0p0BLm3my\nzTFL0uZrkfMNOSko6OrOGcGc0Q2sKjwTrPlyzDbZ+lYX4Ycnl8xLyskg5M/e\n8uUIH1FQcItmJgdHf7FjzKOE4lMMJux8EkiZN0sY0cmJt/TLPqFXAVRDOxjk\n/1yXAAMIGLixFPiEHdUcSuDlnX/U3zkaN6dRgI3Vp134cDIQSj4wSfxuc/Qt\nsO6g2yBW7Z5B4RLwKwbJLq82TVI9PAZSxGgCCkyGwGMuojgrF7MOzrhqtlmZ\n2jEOYf1bpblUwE8tuxFKlMNL1+/a+tBYF5NX5F/uenwQc5ofb5jVDe+edD4y\ng47i\r\n=b/vk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZDpFUARwiYe/YTXUggraznVz1YzmEqwNZpDKmhcy+OQIhALBnfcARbeohRKfql1rB6TpCd1xVKOEKvl0OLRLIn25w"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.05c6a93c.0_1584981403281_0.05243166863649362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.14.1","@material/mwc-ripple":"^0.14.1","@material/mwc-tab-indicator":"^0.14.1","@material/tab":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-jDLa9ZardL8RXYuKr6Ckzt7/0G+SxIVcvTDfKkOgLowfj36Q9SpmCBrx8nW0i5NLT/5aXhcdy5pnedUIdMe0IQ==","shasum":"f16835d6de888d85df8a7da7e789a1bcda679859","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.14.1.tgz","fileCount":16,"unpackedSize":69551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiUCRA9TVsSAnZWagAAYFMQAI5FG3P9x65aRQoHBFFU\n8Jkp/EvBigB39jw/zhthoLtpdhjb9UKAxB7AxDu+1s8HEm6ukna9Ieh/0lkn\nGghBUZvX3UwUCrW6Y8wOFWpDZ/xE5oW3BI+S0aBmMRHUEkLg9xPlos/z6GBV\n9vSFm8IVimZJ8AkuWeyK6c4kuQNRgkR/QxuKd1eE2SROak+G1dcHU/3G7UUQ\n7Wr2vSm1jUjUIybWRaVpcpTjWhQJh2CcKVfKDOcaEIXwfwxxbR9DDQvQoMAt\nF8eTiJI7WuIzYPjCB8nytY02hUPbt5tup//BJqupOAuweWLyPryGwCWAEn+y\n8LJLnGrXwCGAsxncQpOVBhWGId+xhmC2/SavOR4DDcT3oa3ZFymZUqvVi/g2\ndEi6T8GNQmCftsqnIHZAUDNkfPsk6DLLHlINf9L9BxM1R/6zKuJbCDGKXr3A\nx1v6gbfiIZrycv8PDM+K/8liy1ZqgIZE1KH0PwqDSGHvyGdo8BLRgwZEAahs\n+UIJ0wfWlJ4mlcZLgnLHSWBIRkNF0zP4zh8hwH3wR+/BSlvVmHv2LH/9N0os\nedN2M8Dgh18FvMAp4qMg1NGRKrdVLpf+YzUkDMXloSg6gbGQTIPIb2XzNpgn\ncQuLSZ25klmeA/tPOJ92nwq6pCUTBpxt+68JjuNpiVId92N+BVQdLkEqiSBc\nclmz\r\n=cjBL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHtUAqBGcBkai6eLdgjxDqStpwPcjGg+3ox3onJEvxOwIgCV4RGf2wp0ll9wfTlDTVQNxJg3qgsoFc0ZuMM8Pz8do="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.14.1_1584986260461_0.593254511544028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","@material/mwc-tab-indicator":"0.15.0-canary.4e6be3f4.0","@material/tab":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2nIFGn1zVaAvQcZ49Spzya7CPtZyTf5UQfAj51eTz8xY0Rlp0OF2vuGYAmtoCC+c8mv8mC51iDpnAFoDAhqnSg==","shasum":"56bf649b1e8b9e76dc2a4c934841c73a516499b7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSaCRA9TVsSAnZWagAAW5YP/jA3rB12PyxpjOSk9C0K\n0LKxblT7OnNyJx2hUfNBTjT/59/Dh9Ggj0Kd0OaysBwXc/hVf0QEienW4vEP\nr9cDZzoshnjPIDmj8fBtoIvyYgWQOFyCZhJsW5Ed1qUzleIUWndS72YWhQyH\n8sxiZyt+NiflsTx+N7flTZCllkU5N4ObCV4y6g+1aBEiRENfCS3iiAqguZeW\nJZZmMMlX9KrCfyHU+/gqtrGJ6VXbqLcp7n8wu01GtzieDJS1WwyuD7Sq7CbI\n1ynz4FbjM2R56wLu+sAyd3ouEOwodmTk7eVeCLJu5kZm3iAnTuV8xnj7SP9G\n3Ko8s9DcNBzULm16IhuQ+YDqH/fnZJt1wPEfNp/urUIOPoenWxwv+Vz0sxSA\nbhKl/wIz7nmG3MOxeazHxB7FaMt3wmiS8KT39TvFhemYF0su9zdbE2RCIV6A\nAXZ4y7lDxEOZTBfvTRE/DojiOLlomILSTk7f0zyqSXu9eQi3s9y+1ESXQ2G8\nuJVf3IJmz+EjNvfHz/5RTPzqCKq/5eJZC2eP2C8ToYdR68ENgV72QkVSnVHS\nl2g5wkdMj93YbaCRddvJAfW/rmIighX+dyTbRiTZbBic7t3WMrDH0TsIGG/j\nIZwUdXKM4apjekRY8YUY7+Ql7nhVPk1O4UA9yjQi1K7zFJ6gAWKBj4mNjEoA\ndvSa\r\n=kCZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO4YTn1cG5qgHGLmtD0NFHftJHlVwp7Z0kKWKwqXfDeQIgEvw3eAOL4xWZXzLuXbdo3Pyml5UXPjBBcaCASnC58zU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.4e6be3f4.0_1585083546126_0.8528784879160134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","@material/mwc-tab-indicator":"0.15.0-canary.c29a683d.0","@material/tab":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EOAJ7mGDotEId1eLIYqtbUAqvqgUM879rsUZSMcDxpv1XjvpMn10GOZwIhkYPr4Uxeo3c4Kz4SOmPlIw2+PuKw==","shasum":"963d84cb6fccbb8d349dc23ed33de7e3dd87ad8d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjCCRA9TVsSAnZWagAAFUYQAIkob89nRyC++TNQ9+1Y\nDyM9gMNlseInlmeyiJ/XbOywkO6pqebPk6KZ0bDLNOrhRJPnOrEKj4ZELY7r\n+56PmFhsyR+aRpN5QgE+2EMDSlhAQq4QrL3AlEYUWCBf3VaEKqqQFpSJRwnG\nPzO8d7CcQ4DQozamygPP2DuGnRWZuQoI25Cid8qvxp6DX6Ek7yRmIgSlvQcg\nuf3v1lcGGyTTzMkf9/sU9TFridZkYw3ErdIKVhjtSHW1+ZJ3qZnm6nCuHztL\nyself8JvLbXl9d2wRsOWoqObVLmCvhHCvaC6Wxnhlgbmar/wZMoXS5bA36Dl\n0bg4Fo8JtZm0cezGP0zzvwrV/9CaLTEKTPT0XSyRRn94ty+h/dox2NDNnJ44\n4+UzLWV2HkIzUxAwEw8ceXBSLWviEKBEXyFzspKEyWwLUfekLS1dguyBe9BM\nKIIYbs5BcrTKG52FtD0xxwX52e+KExqWdBrw5u8FCLDXN4w0v0RGbZzDckVY\njRyxO60sFsxjUOt+qxnhrwL7IbfDUHvGGW8pkku3znH1uZ2y8QWY2yH5NCZe\n2aDdqLgw66PGqd/Oet3sGBFFT3/8p91Pp/o90Rew5LINxEttZdWsVvHPIg7U\nCPd4WZKyr3XMI6jyia9Yy8Kcsa16RDcp0Gj+YVBeUwnalcKPidNvf7uNlYKN\nLXQU\r\n=O65T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKgk7pGze+O/QHlx1AdPbcf6L1w/VCAgYHqkQLwTLdBAiEAhHviAnaLpJamwCA5dxN5uvORP7hmGIj9ihU1TcomSY4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.c29a683d.0_1585084610477_0.2592644620671185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","@material/mwc-tab-indicator":"0.15.0-canary.fca3dd9d.0","@material/tab":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SokorgclDXWLvcz7STd+xlIjGhHfpXqSPsTxZMQ2GMkfV2f08zl2uKfzHlyMjpysWcwEvfgn6dL/hS8t7c456Q==","shasum":"df87f356454794e7644c96aed83b7483db20ca4c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsXCRA9TVsSAnZWagAAUTYP/2H1JsDJJZKVd705rASZ\nxAdPXIueuT/B3tfRWVJS3uArSVq6QgXKCMslSlRhXov+fbMHRvpyqmNovgQS\nPQohy/rdbE+MQIjTABXM9NMf5dMP+hC53qGq27ZWJYoFnCut7AGeILwTtbdv\nM4Kc30htkIK0uzlgj2dK/+TWYDSzCmldWnaQpz218Ib7Y9GUNQlWwGYFadtX\n8w21SnIF1E7gWQhOzbLIjezRuiFR3asw8KYlt9D3Jevll+8uMptcpGd3rDaf\nytPz2GwTq8euMi2sqSQ0WmK6kHRTE6oWl9iX2eVb6CGLob7sgOlJUvhV2j4t\n2GQPEJW1jFiZIUnYCBql4GrqM5s9hDxPpsuy8tGIJqGdIPprutaR0Z5QS3s/\nzhatZQAmptDpwjgebCw94lf5TtUHOXPPdsWDx/LS8iwlJm14tqW/Grmiencj\nkKN/p+VOO0SE5XANwlFJdse/5MRAakmALSIRBng51d6h/lNpJkgbXvkIxIXM\nA07KTz1V+ZQwAcn5Irbg6WT+VdQVnQQnWyyZ2xkWon69RtY0rJWOxUxHsK6u\nw0nLZYTp+tc9EnxH1lDEH5wvs5SHbiiM4RUZPcPzOXj7k8W5jpQlgoabRxsd\nuKy8pja6HGThiSwA+mRXqArKLx13HMNQYQZDP25PqkkiE91ajh7aSz//GWYp\njwoh\r\n=RxIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVU7+RdnjTiEc0xJWG5PeRc3hJqMd+EvU9y5/aX+PoCQIgNJNCN2+KuTWrXUnsG4645QkR6G+pUlDysrefqccwcd0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.fca3dd9d.0_1585093398711_0.7850542932452935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","@material/mwc-tab-indicator":"0.15.0-canary.1e73da49.0","@material/tab":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nh7S4xJb30scBKYZ5bHWsx9zfBIi44mLUwlnm7+LzXuG0GbeIiHDMnkBZTKirClzt6VuG7yuC99KdfrtXcYbug==","shasum":"fe099652d1397fccf88c201a67e96138174dcba4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81kCRA9TVsSAnZWagAAAPEP/0kGJPYujhaX6/P56bqm\n8U6jmM1QxeRYk5G+u3akbmIgbV6Yp7WFGpCdhcaZTuMANxwREXFk1McC6Juj\nInreyZj8H15Qq4yqrTd/PnXJsPQXw09KaUDP2onfOQRTe7Ph5YIH9savr0Ii\ntit03BHzoOPvAFu42B7NGEqsj43aD0c9mNi6wnIqaa0sjPtkBEYKEo7Et9J6\ngFY7p+1+Fqx56vf0b3TkbBbbnwhwFKJYGuEGzgosN1lnaf07xwPYxYQVXb0+\ny0i9t1Jdat4MRqulFBEuzlerjF2fH89HWCtuwB3cgGZs9SZ6lKyuXx4upaBp\nsrnhBdi6YYCLgzzN+xO0Csq3zF06E/mMalOU1FrZszRDEU9iGJ9vhDOF5Ym3\nfloMHxQ37U2SZxFkxCQUbir3159TUzz8LMuedCh5yp7KSPs4qfMe+wGrzkhN\n4/U1SW4gnR3sUOoa50F0ell6fnRfcUoXHJR9G9HuuFTbKH2EB777dQlPWLtM\n926+lo+rnc85tMH512kEbv1eB4EBcAazmwXa027oUafKLDEcWnqF4YtdaLEQ\nhflLh8igr6AC+mwefFb6tn+d5MdR/4CI6Z9YN5XXef8QoOmb8n8HdfvtK+I1\nPUM3WRkpCe6VAA44r3sWe3ChMlJ3xWxI+K5uZAwucntFJM2m9tEGKynrmawz\n6Fgx\r\n=YbJp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH3SIojX3zga2Pef0s9Z5MGApsPwICsdsmsyXqG5uxawIgRFxFQtRO8Xe4Jeo3zyN6Tw8AjeFWLzBcCcgOmNJx3z0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.1e73da49.0_1585171812479_0.8088796185970961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","@material/mwc-tab-indicator":"0.15.0-canary.bb6dfc5a.0","@material/tab":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ONf9Kb11bR8SUhUTXG4713Te+aZJz9/igWVwsMhBItnZ1YwvYWDh65GVFGLxb4lB0vqXcJ7WYnn7S5DQEg3pqA==","shasum":"baf29c9033b71d1e8dce0c86f2ea47391e5f4322","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWECRA9TVsSAnZWagAAaPkP/1iRCh5pfyEOmoZk7bBb\nmMLlglb7Z8hkdWBFAe9VSofrWLzZdbo8duFRm+d6hdWw8A/WjLhPBCo131ad\n8mdN+x3wCdFiadBID2OwGiC/MR8LjMppfXlvfF7lM9EnUpRDyiNeGxa2ntp8\nyBrcAOoctnfBry7junYzYNAAoH7qoXDrSLHTiPP4Dvhj+pUJ5rJR8TMzzFWY\nuXD0sRpzkAfVl3valBZZ+Pi3OpwUr1ihsfNoLcjQQY1ge40Aty0UQ+t+RqbI\nz6rn3zBQU41wW8ZwyV2kaSFdSxG5R4W1+9rooPKLl+JsLngCioM419KvJ10G\nCL+qZcPUiDU/vlO5YtCl+i8Tmb1kBC3c8gh3mNC8paQ9XCYBqGDqw9CqTqxk\nhGE8HFOFYEF4yQbSKQPGx4mZndwZwexnIo5Jsg04Rkb0h8jCjOdEy322osBv\nhhJqVrYhe/wWQrWAwuYXBHk6YI86jO+2DUKYvcD9yWZPtYfnDbNjyVATC7fb\ncGCMYKPjcQVgH6xEmnArZy5uSn7Kp4itISstXTNjQIAdH4mlCkKJ/nVUovgI\nP8KS8xKFyb8MulbAOi5Tnr510WMK4mBmc1/9I6byUoaHk8qQUmD9CnpFhAU8\nOVSH5V1hz0cM4gGNeSao/Q7Uel6q5CZqhtSntW7few4dE+OOU/kXkZaYuq82\nvvW5\r\n=GOBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICq2ajq/QsRXDturRFzxfSBXV1eFgsa5X1ZoNb3n17/rAiAj3wOfwuTOP88JnlRDmYV07pzAhkVI+7Ibv4gKYx69zA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.bb6dfc5a.0_1585272196001_0.5058988303884568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","@material/mwc-tab-indicator":"0.15.0-canary.1884603d.0","@material/tab":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-n+i2pkYPCf+Zr9rnThzv7d5E6xHd46yoNhYrN6ghUQ8D0mU30ZYqRMq3Don5KpBmeXsWT4CcOEhSCs7EYvbMjA==","shasum":"f7425ee5236964fa1160a5206f782f28d95886c6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflo9CRA9TVsSAnZWagAAH8UP/i6Rj/W/AwpuY+qgdDFb\nKYLCH1BtoC4AwnfWSnHlcVtIYLJCeQj5emb3dde4d+WVeSQAOkJ22LxJCdfD\nK6Oy+B+Dx0latx73lMWwrigDffehZ8ABR8qJMbmbV3EMXwoq46sYQ9h5X5u9\nt7cak6g8WLLl2a9idg06imunbBQ+RnMHzaR+Hyvk1iQD77hmKzc6IEqkvsr7\nCvsL2E2oGlC4JSPTNYEkkIDpEa6QUvUhjn7wXViHBvlJRReZaKo2Dvk5n7pz\nSQ/bu4+9CLLrRCekrbfP+eEsx3abbVz0BGAXlwc64TQfKHgLBF+7x95Pg0bF\ntZ+oPXYvcJJKOI3iBPYQiUMwjOeRtjpZeid/6E7QKcFlb7PdhMWmFI8qsqbU\nvRH8Aljn8HylsH8mkbSqTWRwmZij7yDskZ6U632LHp5g4xBeY9ThdVKirbMZ\nmwbraMDgq4i7zTqZSCjdEaygUTbiI1QaQC903iqbgI+rOeCw+3YPbUIofEn/\nq2uJ6DZgU6BLkT7URNZFRhdEQHIFnR7TT6oxSe+ZS0s7YvJo6vQJNP6vk/of\nwSqsz1w09xS1yChticzZ81FV9pH17jCQwAM1HjFCVq4aD8sYuj9RS2BhT02B\nO38nzhQKL38D7/UTHcOO9JuzaZ4gznFo+X2JAZQ2aMTPmV5DF5B0saF4DIMH\nt4q+\r\n=ylt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiVVod39a0c01m9XLkEJAQeNy1I1CfWntm7jeCGoztQAiAF83HA6/4fKWG1gvpcP94qAufUIQy22Aj8eleXUI2Yxw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.1884603d.0_1585338941049_0.4025416090664542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","@material/mwc-tab-indicator":"0.15.0-canary.aff73cab.0","@material/tab":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2sy4yQzNIIVE8fTgKHiwxAknPjWl1z08spLy83NSCWHtREOxq0SSNy0UCoE8+V+uAd+bsRr9EdpqyNff7/Sy1A==","shasum":"627cbdeac8ad54c54222392b10bbf85a62640964","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy2CRA9TVsSAnZWagAA3NwP/1RS8HEa3mYGho5eAJ/L\ng+l+FXIB+uBaGhzfJ1Z1cUKNBLJq+9hBqr2AYa4pzAH8ce/PgJTsqY6zugoB\nZFTEF1ZE18TXZqQ+WbKXhV58yVsP8hCj5p5DBWTZ7Ag667I5y9lHP2IISFFC\nvm6CTNE2E10S4HFHAbTYsTxRG3BgSEo8pSea7ikr/AWbWStFO9Z4k1VEZyKo\nIPfogAZy2G2+0InR/MKNYdctpUpHLRxmz65wpHYnbKYEzS55Ar3VB20cXAkN\nwi9hdkQ28+ZTJD8yUeadXSb0K44cTI+JYxg0Fx9hhz32g8dcoJTI9fYLnb/5\n3NwOXbXH0pyAU9dHaIzY+1THPVxaoUwpVQx971JbPX7giF1Lz44mXoV3KokE\ncBTc48Zu2/zXW2jpW1MPUCYpDeZzKB57ch62ePnqJRWfkAynF+qzUtIaZRSD\nRNsSnQoP+pKe+RcgfHH5+E17FPsim5jbFIxLrNEWTCXjG379WiBfDgXGauuD\n+vBCgnTV2Xzz1G40vDXiIu2Oecg2NaCoE9ynNX/JGEmeQSPmFhiTkFAS8oD9\nJ/OTrKz+BhUQsLCg/z7jyqb7/2sFUnQX9zn0H4hHVjJbSgXmVjoEgZjBEcWV\nLNKLPNeCRnZc+9GUvbDq+MPKVgHBmtsc+U2hPTBjPCB1GT7tvlASA9i0pzx/\nL/eG\r\n=4h+0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/EZh50EJQANGpikb4D3WlCtGN3vYtSE8axyLftO827AiAwILfqKs3/X7Zzc/HL4iM2g/SEvOJfpQHS9crQJXLymg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.aff73cab.0_1585343670141_0.3507929901805349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","@material/mwc-tab-indicator":"0.15.0-canary.63168f61.0","@material/tab":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0x2yN5Hb1293YA62o2XrsKv9sk719wXtJsU3W3dzA1cpiaZZ/wB2swfaHlWMFm+PuRAE1YGR9eiQTuRPEqHnoA==","shasum":"28c305aa6f1f1fbcfbf5382041f80334e09632d6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gZCRA9TVsSAnZWagAAzxcQAJDB4r4jAZ+pxUjGH23Q\nA2URO0/X4pz9mOhzIKcoKwzWrU2X+Ln6V8RNhAS1w2o9GIR7yNaz0aj9Je96\n6iyAp29b6RcWcQtI5kvjLbwVfn8HseTi8Pwvey0J2sYX0CzbbPRqak8f0Ws3\nTfsGftWWfTo+dyyM6sAMJJOzyTuRf8DVPVbmBDktMLn1kZkwTUt7/fj2/s+W\nWDohkFtsuzgpCSbwaa6sU8hSsmp8VqeZBHoMEScdm3sjokeV88z7Wrh7a8ep\nz6J8gre46XO8b9fQPLdTVP7I2hySUScvqks3OfmuRjJSlAM3HYV62Ii0GE57\na2Wl9jCa/kQi0i1z+0VUDWsCfnPyaNaffnWVjNHXmCieVdQjxkRObASXycXG\nZuyXG5N2NoLz4oF6cpcUq5FpDQrXyIYsGYh3ZL6McC2S0vfnbk9JHiEIczk0\ngUzRj22PlS4Tb/H6z2tQqYYuZaoDogY1+KoC/PmZs9x714RbI06NUGwMAsCP\nB2hBM98/tcnv4D+76YtZonJZKk1uqyzXypdaZII0rBnk1snD/7Nd056GK9H+\nAQHHeVj9tdrUh8QSmWeK9D74fN2apQXmkpbIrsk2LvhUf2N1h5T3Br+qIJkS\n0eZ/hYDKJxErOSIxNFelKTnznAdNU90QXMsZlbYE5ld8GfWBY5v9lEMXwJSa\ndR9P\r\n=N5jH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3Ge4LIDH+yazrS+BeXf+OOoj0XPyzr83SnRfk6zBL7AiEA9Crv6ZzQlmFG5JyAmoO6Q5uwjjpAzRdOqCEfR27hM2s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.63168f61.0_1585678360629_0.19061612087172697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","@material/mwc-tab-indicator":"0.15.0-canary.9fb79b3e.0","@material/tab":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8lOY3BifyXIgYrS802NsTUpoTGlNAB29F2CUswPnj5Ky7T4BvmTyb8pNciCdUYwL8tRqxnp6cq7tSrLbbIt+eA==","shasum":"96822c4bb6b8081bcca205e64095c58bc90f0e44","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QeCRA9TVsSAnZWagAAEJUP/1XO4pFnYEG7MVpyQkCQ\ny7f2ZZhQDSWB7pdwsGM0DBYh1UjXC00lPOX2dXyKeRnaHlXwcwLbs/ZgySRL\n/T93QvWGBK4j44gjSQZtyWSKboSMhPOINXk5tvaicOj7CgCKBTXFRKQ1Pzm/\n3VUSlz088388/kXaLlg71tMl5Bs9G9CJjtfPu4PE8eTdvdh2kJyJd61WBeWw\nKxPZaByaDMqIWbIMUsrCdG4jed6foykEqb0NyCN6d85mPfI4TO0sE4FjcQLb\noFNUW28MaTsVkYsExALOZq9gBvDNpSwPMl8+9wzgtd68BRx1XUZGtPjI6+5+\n/U2GMFrfFXiNOBZdBgcdiqUY9mQ0gRg4SKcXL6Ko4uRkXCl4Inpf82Sn0UB+\n/4oLDozxnp3hhpwSdl14bdeYmf66oQmLTozW/2z12nlHtvT3NCL+IH5E+KRS\nnT4GIEKtfnWogKo8GLC+JxRIu7PWsCcmXdsvuN4LTdIYGd8a7Vn1e2B2RtHS\netOhDgATNcwdkxctHk90WoQzHdFIHfCnm7wPii0A+W8d1e0y3o9iGIuPDYTn\ns5reRKSUXO1QE6Rj45hW55g/q303MW57+xAiK3QMnwVE96D2CRATbbFTjAMy\nyWZAnUbrwL74qv8dUdjEwZ00TGNd8Gycz/XOlEXtr7PNbtjdRWHScAo/epzY\nxqyE\r\n=VxLW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuIsPJsUcdPqS3fUyiKqLT0OXrW9s4eT6biR9B95Q6dAiAUSjJBjBK2kl53uV5uqHOcXCiujUv1KOrOqHzGEkgIMw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9fb79b3e.0_1585689629647_0.21929744350635816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","@material/mwc-tab-indicator":"0.15.0-canary.9bd3e9e2.0","@material/tab":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DmMI3c0lSA6RTaJBtguSPeN/XOVmxCHTRtgMCqmiN7ETzviLlENh2WH8WKTG0l349OLIdb+ZDJKtpSR79ofcsQ==","shasum":"e3496ccecb67d8be3e5a4078990e4b4ee34a4543","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91SCRA9TVsSAnZWagAA2YwP/Rrtv/C9i6j5uxcKYhgE\nuzQvZklQZrLrwOajKgx1bVuGwDq4g3jBnGYaPgT+OcKfcvAbzJ+x1DpRH9go\niqbES9VLwYEWsFeUdDaA/OZcrJno62EXM7J69WjoH4F+27IQo0/OzUgF5QI7\n5j96SNqULhhMw6zLNjR9a1/DNJdQYTaw5rVMZFWEDa2H2CiyDTMQuBhBtzGa\nFs2ZWJTDD6OesA/6ZRsNca4TGAoicngGPLJ2EKsb1vYO0O0DtRZZeGSF+2UO\n+3aGIajfE/sonR+R6gyDMI+J5h99Gg4rdrnJ6kQ/Rm25TOnSk0eT1id/c/cD\nLISlm6fRzJPEbBtDBiF4I+5wVfCyjbM2G4ndRl/aMVGr3epyZjWG8svM57wh\nIS0vi3Ow/Xt7LRyq6k2u4PguJhyzvnxoZHHcxEQ2qjoSP6QWDUlIP8EZ3AX+\nhvYxOjfi01tG2YfdLHWaGWJk02gxYmTGctXnw7GSqGJzcEWNpSefADbAjRCr\n3Z3nI3sm8EKkzQPgme27W9XSbCRCqJPZK+OGqm8j6mRifMcVg+Jytgs7uNmt\nXmRHTb+XPKDKZ/f5/Wgw7s0NyEFw+HjOsi9ROyrjaNAmBKrL3Uhw7k4YhxaZ\nYjNaphlR069TMquHhkOYrlEM5W++tIliAX4ICRCl2i9kTqL6276VjHEj+i0m\nae/U\r\n=GrX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE9IzV7H8KIVucJpCM0pfX9ZuXR3SXX2q31CHuaNUtCAIgTANsih8/knlCfGZC9Ec4sOFvr8lFNpWqutpZ6/S31jA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9bd3e9e2.0_1585700177848_0.9929353191187171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","@material/mwc-tab-indicator":"0.15.0-canary.072084ab.0","@material/tab":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-n72OxXEGWzWn0VEduPMDR8HwXdzh8t1yNGiUW2dK1qZsvzaE2kXXvRzI8PFcwIvQ7kxREMP3ypUG9s6RIV3AUQ==","shasum":"ecb514cc8d149725e7d6705bdc73c2d41cf68d4a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":69635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAECRA9TVsSAnZWagAAe8kP/2AAkOOyJEpM03LVOHGO\nMdbJSFnoCdCQhPRMbOwb3dIChFEDDX6ctQKNOB/uRJ64KlI9788V61pGtcpC\n58T/hE6EkNVV62Icaz0AOTijZXK//Uw4mVVi8eH8FO/k7eIMb6/vYvs3Kk8F\nR83/FqAg3WuDPABinK4sGUz9+QkWkS96oivfa6garn8GQXVNIC35toOM5qKu\nUwz040bqjqYLf6tSkei13c4qC9ay5rVk7UL3v8yRcO3nOasN8QD7aIthzpAq\nByhROFkfSeY3kbVxTqufxo5dUHL+V/IvEEPs7z8SJy3cdFilIgDlkQu2+OIQ\n3gGIKxxZKPBrTod2lESaRLXRjYLHVdGXhvGsl/jbAF3zFsN5y4c7o0h3SR3m\nIu3y1YLHQWObyjSIcNrDlDWaKcmFvbIJSfBDgDmlQogiW9PSbUVnTQ9ix/2M\nP3xylnHDq7MMtogKibfbVmStjiJDM2v2AvkwS0sI3iOVzN8fs7+I6VAX74vB\n0Hf/27/9w5cEh4RUeYPUfLhA0nhnx+u6qGvbEKuE/xt4LyE5XJznNKyvk5E2\neVTGlaW8F5pq0qLoaHf1KrGvuc48hViUl/fdnywG+Wgkh8xmhN76XL8XlW39\nTZmUuep/DaPI8G+SITgjpTwLM+bg9uYwEu4If7f3uW0JDJq5yW7zRttub7ey\nUdIc\r\n=Kg0j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDFj0+Rldr6RUzt7YKOQT4qNi0dmYnU1boRyKsaE+ehgIgJz4KxTcuWUtnzqoZ9hZtoegICSIeSe5ddXBbLzFBA8c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.072084ab.0_1585766404218_0.61739906272129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","@material/mwc-tab-indicator":"0.15.0-canary.4dec04af.0","@material/tab":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Fme2w8fitMQZKaPgSUypC1iN34rmgpX6fDPUgp+sboMhYyFun48MJTTNNRnYIb5qoXmH8vAiVShWSa+Lcxutxw==","shasum":"7fc784ceaad1addc3e1d3bb49924cb10a6c8d241","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":69635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zFCRA9TVsSAnZWagAA+YUQAJnwKsyIM7rpdc3yE2Cu\ne0jijRtQ95Oly+FYXew8qf0Km9C05b47RvM5685Xuu3TpfqPEJIvYBP8R/c6\nFaBrttRwzIeGVIsnSmKwXwAaQ5yUGaJajshsSe7r6P0UjkW90UAdLZdl6P4v\n6FLngRamOr5SA/94IRem6qaR8HymgXG5mz9tE2qsfVow70AAvTMwH7mUtrYY\nfXrIzkeYL0jh8OOIPCX0oqWBj+1dnxqnBmmySEOUWt0Ejh7Yf9BXRUrGgFg7\nsN1aArluHiA+WwU3x/WdlZ0xCDSVMDTo+tmYbyL7RSMn/niChuIXmNC/OL2Y\nh6I8pZntF+EEBAw0XL3O5IKoaLwanwqx6XjwSwkiCd7X7PYPChuiBvNvoOLV\n+N4QzZOByfzbNzUSB5nZ4d+t7qE8HUk2jFVaS+oGmTLv6/5Fz4f6xNCv23MD\nHEPtQwMNW1V0ubLTpF20SbcZI5mEf6SuqzyIWptnNTOTGgxTKtPsmaWDDFpD\nX5O/J0rjodh5tYQk1UfigAPJ0Yg6GZGpOAySVVAZaI4t+KyaYnV9wgwKzDHq\nLNVAD42p7rSYMVtEoHwDLtQ3aN8Ys3dw3HffyMeTV+GdHCFDv9khbiQWtIF3\nf7NKXUhR3MLihKRy272iMMOYWpRY1spOf8Omt90VQvc5697KDA+FgcPI6MWc\ntE6y\r\n=W4c1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9PCzTsTuMcoPA1UNl4axoXoZ3Knk7LUZS2dWrsSRroAiAqQAsgEaqjm4Rlh2OmaOlpBJennR42CkWVxgZqoNs80A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.4dec04af.0_1585945796651_0.8625628616874899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","@material/mwc-tab-indicator":"0.15.0-canary.9b676354.0","@material/tab":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-t4/ATicg+7vWVX3DS3a/n/vYYW1QcbGeOsiEsRTvlV18CukLs/MyCmApR6+MKVsYsWpVs0rTTuxeoVSRvLNblg==","shasum":"4043702cbe10ed11042ea8cdece6d5f224e28d3c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":69635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zXCRA9TVsSAnZWagAAPOkP/0TXxUIwERGhUeSgzTmL\nBvNkZbnaMwEQok3GeXdAmbMezT5DxlPMIzBUF7Zsdjhi9pBfia246gx1LSPX\nbQvNy5V+64BcFAk0ByY4ZMkz4K6lwd6AciMOTmK26kv9hDu1WX8QKDuu3RiR\n8ii5lA0aNDgA8jXQTZhqo4qyBEhaBG4+OK+1Pn9P78LDr0fzF/upq3eHN3eY\nZ7kCgBhk2gOTeaWR0fHqhNxTcR0LMXaOfucCVa2ZpOR1i0Gp4zcDBPTOuKww\n0IlCjaNC5OqVCN64KeXl2Wr67XF6fvjg7tUIXTv5FjMTAN4tv48Eo5GhZUEf\nHPDDxwjaz4rbqs2ANRUwt8e9sBSYsfQL5GcZ4d5kIimKjCfZMt1r3bhVj2pg\nQoIk6JooO8SoIJAqQnOWIDec+lAiQ2MTm6oh2anyFh5eXYamXtDQrij2x6/W\nB/gOLHF/0ofqLdiT8tEFKYPDQ94+lQaZAuvSbkqQLJ8ROze0LnNjKYVWNx/V\nQACpxNJvm3rUJP7k2sX/hFsKuDdyyEL+Df9UiuRcJG1Ft69340kVF0ku2Wj5\n7lqTuS7dhHN4+m3IGN6WeGTAAyybhZMiGk5MXgTp+WCuToWcxg/NmVg9qA13\nFB7fkYmxgXZJoTj4rgGhg7eK6TnfMXy+uNiO5GEMUtJn1n+EO0U8Q587weDx\nbkDs\r\n=fAXW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWTngzcuJkPOFMoNuYkZ1nYuP2lgNC12yznslJ7yWZ1gIhALah7iWMJMcb4vg4PhRWrwVt8KCSPe/kQecQVglrMIFL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9b676354.0_1585945814840_0.7238656698404429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","@material/mwc-tab-indicator":"0.15.0-canary.6b946095.0","@material/tab":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UR4w8j3fMMnPmS4dTeBpZBSLjYoBhIXDSJL94Mf6DOEdDxouagLleALpTMA5abtpox8w1spbfLPFeu7L9KStyA==","shasum":"b3dc623191977a94656250343cd47328147a6106","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":69635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mJCRA9TVsSAnZWagAAd5MP/1kjJRNzoDymM3mSIWmA\nEx0tS40CFfKhQyRhhsFuiyC7eS9UsyVxGXRus1+J9lhRdwdZ20qiesjIw8GO\nD6oOBPUq3K1Ky5sdT0zLU5vpt+3s18ppsphMahlx8dJ94LiIDi7IsIdw0pWQ\nW//WdmlTIFQiYZJ/eg/70QnHCNn28Vdrdm6TY2uanyTbS9IzbSvIUdD+P23E\nxvGfvBDNBoRJAwxK5GQXgJU6pSCa9OHcY8Ue9KX0X7K2TxMV9LpkZ/uvdX7R\nq2MSSGM0HaORxGl5ZlLU1zXV3JbLOEUzappM3SL4QFbsoOsoipn6T3riz5Cm\n49yTjpJXskgp8jh22fWwcHg8T0dsgODz61016Bfw0RF0vCE3d3va8xt+xJGP\nXKXh/Da5EY+8FvFNNZGqoK/hxP6dhqwFSAfCbL2OqWXWTT0TVvo+q+h9GFR1\npJ9wWwNUfVWW/Cr9yGpHeE72dgkKdfBTYmTz6u8YqlfoZgcDQwGBVaGW4Wh2\nfD663o3phRMFaiqep+c43z1LJm8fUitX6if21pXdySzuQ+8FFmClYzknpK6J\nGmxNH4++Q/5bRNfant+9OsBqz9lCylw5p1gRWqq4bHnj35W5IdgKjAzMYw7+\nLaGowQfzFHzSvFXPywRK69J4XA7kjzK7iSZOvi2huXsJoQxYu7Wug5/AGYhF\nr4J/\r\n=MQki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRYoS0kUIva6lQXYTnRZMwT9av9VpVXBrMlGcxvV/KdQIhALjZB5GNyiIGvGeo03Rrw3WkAA0mn0CIKovCvNiLp7Bg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.6b946095.0_1585949064960_0.5581988585504285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","@material/mwc-tab-indicator":"0.15.0-canary.5ccbfaa2.0","@material/tab":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nvigAL/n5Az/yIPTuLedkYD8vfCBe2YZU1AXSGT6aCf6EV9gDQP6SAdYeScY2XUrZIuarUYRNl7cKEus9aTMuA==","shasum":"0edfa7db9607f0e0d1403a7776c0c8468734c355","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rVCRA9TVsSAnZWagAABWkP/Re9Z2AdFniq3+Q1BWCu\nOszfJsxFv3HVwRabgILv4KHh6PJ8edJ1Pjtrj/Kyxy9fdhlKjXqPyFgTpf5K\nekKBPnWkNZwpsOwKRw7pRDsf00zdpz3RJ5FLr3htD8+LQPsv7SRC6BwQ/MKf\niXBlQ8l2ZUKVOkeYC71/NIEHgH1MwMXnQLxuJlXQxfJhoFxTnSZpLMRKwTu7\njmiMcov9U+00oaBjP4NLOpwnyeWC6qiNYNx5ZjRd9/0DMg73wB6t2vvLu4iF\nEYiaSBmoj54veXGP67Tzomvs3w4cgRFcMiTMzXesdGTXPDFepnu6LERN4ChQ\n5kHsCwExzNaUBczb8QyBfWT3AubCLEWpIOZyjLAM9pocog3rmcGHFE/Z/9bY\n34O1ELZ0dvufA0uLtEdBRtitUmi6/nSDwIq2GgMqy6eWWSpIPhCLbE5uvmdO\nvMgIzB1L9lL27Q+dmY13Yzdye6YlefBoeUtDixdKy8S3xKCQeTnGU+2+Td0k\ninVsg8RF0xlERH8T/0nQarOYMHe2DZYpsEooCZAQX8K4a3H/LUStXC1Sqx9M\niHrmbTkAUnegV9lctrpzBZOlGXSm150ffCeZp0z4ZtaGvnBSNWYNck8SC4wP\nMexpSm3UDDaa1BFAsQpr5tNcOKbnILWGQtUKlma400DUodI2aGNNzVlmpDyM\nJj44\r\n=i5TJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAUcImITpagMfwUYcA1ykWKIGexTAgnrZjIwtObdb88AiEArkQeyRX6ovshmfact2ZhAEPHEDTe29PdJ4TZumhXW8Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.5ccbfaa2.0_1585949397377_0.6165193066015273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","@material/mwc-tab-indicator":"0.15.0-canary.a0ab8772.0","@material/tab":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ENdXmwVXRNwM848CtEmAEumkPuyE8wfSN5pIg+x/g4nk4i9l5psRqFCds/mg/EB1TLZNzQBxDTC0+KfAv6I5qg==","shasum":"87075dcb8636eb0636651099c9d1a7e98a79de3d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3hCRA9TVsSAnZWagAAOXUQAI+R3g/5jZyN47UfqRPm\nDXjqF4WwUZsEzwhVemn/NNbJHPTFsqYnKfj83BXuQ96G6n8uglR0HelDLpZp\narDLWPKTJMMKy5uUTFoJDpGksOG798QO2R0cZbN0IDQHdqmcHQas24rQV0lH\nrlGl7I7e5geIA/qUK2DhC+2XpZFibvO8WuQN5/OcproIZl0IYaWhQ/8UqU++\nQxqbkXreggBaOKWeAB4cO8a+6Rae5RcPvwzkcTm7e8RNy0V/1BKKXAQjdFK3\nYi1a2PmWULK/PfriJSsnA4Ek/VFIHc95TcCWDohwr1aVUnkNngzRaw45B05N\n9B1RpukaxgjcGH9krBvqfOEZ08TEsvXvB0HIKxDnAv31LBMVAQmF0bbPS31e\nHLhZ124eoJjCn+s5cBc9ft1njP15B5Qz9wgy3jrkfn1iILLrFIB/oZGstNyf\nrCCMOAXlD0X6FfixC0Y7QUn0kA9A33PCBYWL4qpQsO+krclmLYo8gYsHmADC\nk5MdmxKRRhKo1MvWDJeT4JNthHVnL88dWe/IQvouCtZJVSshIyEy3BTPz0Ce\nf6/WrIpsvLe0HxXuscwD0QBYSR7k2jqig7TFM81JotTd0n1SlP9NbUuJIBy2\nQGpVNM/se9OFrssMaScaaERHQ3UUyYNJ6cJDKaTUAS4r1DMaBS75Bsxct9Zb\nsbGr\r\n=OE6i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHthZ5pokCh3RiBrN2rK5791Z3guCPVTNnozr0YsyahRAiA1OtVju6NgYHcpzorP0+krKPfqNRnFQM6tTN7em40UnQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.a0ab8772.0_1586290144470_0.6962012645546571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","@material/mwc-tab-indicator":"0.15.0-canary.8d352305.0","@material/tab":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kAhcM8M8WgSZ+sjfDa+HAH0gHe8bkEccFC+hZ4fs8w6+mxi/NzLuAO03guf/Az1eECv8HMofD5hA4CfUTjqVGg==","shasum":"4b0092eafcbf9ced50b3be16315d2f324bdabd4b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPO9CRA9TVsSAnZWagAAGdoQAJtyX4YmAmDItYtMMXEv\nT0saIUdeKMcYJ/PDFyCfGClcxKQDNoGg4Me0UUEX1U5shem2VarghYX45n0K\nDpmMIO4o5OHrIQmMJ0jzYRo2glkzVlDebpY4ZzJ2Vc93onopnHN80VA2MUde\ndDeeqbp/tCxy5tsC2Sn5a98fwhiNNh2KCp+d+mOnHG5MQdvERAMxNjVLYURy\nEqLYacRCL2bXPGiL18XtRio1aeaDj29jemzSzwXJHQudrgpCWTz4PkZpfgwP\ntaaD99dAJ3rkNqztskR8zVcrP0svqzGCSsLcu/sQ8mDSNdYmSDyKorj8L/nk\nRpjRtmHQug24AzMmMaQ3xPNB++bqjSczA/LfKwA9KdxEj3/5EhaWLj5U5LX2\nw13Og1g2VZJzZU0kpD1pjFdYHSOS/dJdVPBbJ3b/prCrkF3MI45h8w03EGWL\ndVqtJTgbRaVpw//WYu7G7kgqk3NJarLUQRg9faiC8+A3JW8LRLA2JGFQCQP1\nbwQw06oz8sxJsbvma9+zzw6BuyXre4akaQJOyL6jJfVxQb2nuS1lDjM9/74b\noW1kOcq77i/KqtEBGPpoqfSI/0P3lw0gEGwPdNdfMndNtCbGKwReUqZffUyy\n/n1mTrf0nwsp1ixsv41MB+LXvWVT3zCNYySu1HoBnmQ6SUFYrNp6HD/dqbUC\nXhK5\r\n=4ivW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnTmsAOlXG4pN7zL6QPENbh1xOateRIEaAxDU38v7l1wIhAMnJtqsJxHpGgrk71ERWJI8gb96rdq+Zas6gXa5DV88I"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.8d352305.0_1586295741066_0.8095892666920013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","@material/mwc-tab-indicator":"0.15.0-canary.31eac79f.0","@material/tab":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eM1asmFxpd76eA+SbTNZ7CrxCfVZNDgKVQCcSFlXu7QpfhScPy8r0FWXVoq3I3GyWv/AzAm9EaEApM9yxZ2Bvw==","shasum":"66afe5e6b03cdd9a85e9ebfea187fa3f2414dedb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdQCRA9TVsSAnZWagAA6SsP/3mwVizV2muD/ts/kort\nZMTC6Qlr5v+7HacIQCgquy6kt9HzPFv/5AtSYDwXZad5QzTY3g5yJKkOqwp9\nR2RTJEQMaYVWDKDL/TcmtZywaqEllxymr7FG2lqLONQGWUrwINlhHXnwt/Nk\nVqd6HP6o9dE4f2T2TaVOepR6g2Ccy1iaz0VVsJ4z882MVNqA+dClTqOZJ5K2\nbf08Pvx7ZUCdPxialKkh5imb8dyUGAQ+WZ6Wg0xpMiqH0bn4b0G+MxgQLW+k\nTOEl5rwHWvBYYZlelsQ2KRkYHv1QK6JluTsTadrLU0qvqI+ud+QJd6blJL4r\n0m5OweQjJxbxq2NWecPz78VCpqqhsrKHd2pmwBa1LKVCpXnnSD9Dx3p+LRk+\nEoyAJ44Jf7DRD4AmB77dzeFGQIML6JBN4XkxWhjaMG5o5V/pZ7ElD0CVkYJT\nJwJb5scaOXlCwiEzdU7XpVeIJ7LsZv0/g5ntTzH3Ram66LvV9TaVZq7w8Y+u\nERI68KdfJ5SRyW8MVAfYjl3KV0xB5krnFIvoby66Ix79ktB2BKvCCQzS5h9Z\nwT2OAULYI99DW+orPYiaezwfcMpCLGzpQ1bV/JFTVh1tcsB13ms/Pb8VXJHT\nDjIuZlAqQN9Byw8CuaFijbjBWsU3VEN5glxkxSB0Guq4/bqoJ08MEfeMwKuN\nulg8\r\n=kJid\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClmvwVRvQz0FfHRw7CWOzCW55kWDrgKlDG9XBIjUAGXwIhAO+OygSz3PNEODtF1PY7105j67eq2Pr2gQyHoEcR14vG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.31eac79f.0_1586296656357_0.613667214697647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","@material/mwc-tab-indicator":"0.15.0-canary.ba05565e.0","@material/tab":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-yWNv93imsVSEnPQKEtUUaeusILrOx5aUVxDgas4M1zKJzuyY5Cgecv8KJLDXduc2VNZNkzzEY9eMD1uSZBRydQ==","shasum":"9b59ecc32c88a4e9ed995c23a889248bedab0443","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgq/CRA9TVsSAnZWagAALOQP/jk/lF/rd+nmu/HGNsAQ\nG8TKU+bi+B98Mp9xVxrwYu69h3611lDmilrMFXcSNLNemGc9ULWDS7Dkrtha\nsAMFhyrRLFQ38c4vMfDH1pvuggWV53GazEridDctMIWPZpou2JRbKNM3yhob\nPyW8gSQtdbOsJnbaxHV7rRaOoqEVU7DF8AYx5M9xlnx2oBRG9pH0CUBQBCsc\nrEexyvVqWAo33RX13wx/f9dcnDdWbMsyNPFoMHCHgp5P0k1YLlhJik98BO9g\nl/G30QVuoLD1xqo9sX52baPmVRqhJqY1nXesqJN8ooyjZnRQsSkqphwAryVj\nJBuTWdvs8uBtCwhNsJTRNRkJgY4SPfWIFOcKodsf3mSByYteJKVpZY+aHlDp\nnLJthaYKg9W87RFohQaRfrDC7iGbcuBy7lRXbfUlV80/dPxQb/cLhDSi9FVl\n1wvSio5VRjG2OwxR9iJAuW2ezVbwPk2Lt/a3WgKt8AbI2nAPsIwpspO/w1ij\ny0wARmznFuFcW1KMAw9g7RWzjo0J8GJbftfi49BgyK9hVjLOwOhzyrF+wbY2\nxKOCLvPtFadQxCIHNXNllXbbQJuXXAmF2jJKKcxRdCXPwKU5uoCVKZ1BcEJH\nsnrilcBY88vCw0IUKVyxNRIZjna33VcBkFNNYmhbIlnU+Uyh2N0aR5jZDlDs\nb+7R\r\n=919W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsV/KfdfdAA6Mx15I8Ov0WIrXrynFX3pI/kTROrFWYLAiBFoCTdcBbR2IFu11rm7KtSfaPTnoZiJMJJ3m3+HpRw1Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.ba05565e.0_1586367166738_0.06620680474916152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","@material/mwc-tab-indicator":"0.15.0-canary.25099f79.0","@material/tab":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-JVrYTxqOEfzi9qiz9wgazYknNMIR95k0Y5EnxDp0giUh/B+7N2g6wxog/3mtuREe8UjGkH6WnWSf1+Dzh0AP7Q==","shasum":"a6a427a13a5fc4cba56138d23fd09096052ecb97","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKLCRA9TVsSAnZWagAAIg0P/RJZkQKl8S/NxOyo4s+S\nWC2tXdxXjges2WydTnBwvfrmkrhjoxRZ1I30Tow56aJYilndEtnbkqi4U9Ni\ngoM0f3SCTqQy9i32Zrp+t6G9rwVMb4Bxgyo6VeLI/w7Jtl6z9t05VlW/x0lh\nvEmDxGf/LVO7N0Aq8PF9t1h3sY8d7VXepxziXBqEqfAEMnyvuG0c39XDywS+\nswJ4Bm0hWrc2E4CZGkOY+C0nCdjrVVUVNzNXULuHyUlDBcUZfJ9g/smyZO5x\nr5RyvtqpuoEAE4lnN54igcPdbrXwaVcdkSIwyEo/rnZ/oI/rkvdeIaDxNx8A\n+HowsPlzSXkNYL84XHwTCHKv6bIs3ISBYqVgKHFzKWs3Y0H2wxMBPZunEtuJ\n8XzIG1/mqKG8sotUVb9v6XlSaTwfiWs/hgmwtX4x2a4GcXBi7+C4BK7eJSyJ\nxoeQfFHuQOyQ5TRp65C9k9RPu3ap3mnrLDICqM1Pyv3hhJ5x1o8fDRSv7/VG\n56GtusbIcVD6mWHJ2GataolEXPmgLEqYL446tWW/1msj1NQZaBh/FJYZ4NsT\nZeuQK4gOXLa4p97Big/qWkwBGElf6uOc0H95pBfNKRGJceAUGcbpG/rewElF\ni3glRmEffyPq2VJDZX9Vo7ovOHiCXPEl5YceaYi5c3l+OGgsm+FTrBJqfC6u\nPbdX\r\n=YDir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwYTNXb44sNA5zHvhMLaHqBmst/6gUHFQqCFCLYG82yQIhAJvt5XcpDg3fv0uK1B/uxFkHgMsAx/hxfcMQHaEE6Fbs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.25099f79.0_1586381451447_0.967245550832091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","@material/mwc-tab-indicator":"0.15.0-canary.447e31c6.0","@material/tab":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-a+Uh3rdyIU4H5e/FNvi1LdGi7pEswQZpMUMVzBovXEwJU4MaXrZCov9Pvj23i/PbHiy+bzk2npI4zrVigE2EaA==","shasum":"f3bb156895802f000ebc269b78d5536fd436d403","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnd9CRA9TVsSAnZWagAAUs4P/jTs3my7JkQ06fiInbyp\nYs7DeJUwsBhy+Fvuyhnjm+F/JAylfgIGLR1ERbrwQT3D+PuEohDdLQS/m9Gm\nH6njCcKcLgLpeT5WX4BhXBFcMqbGr027olFwfanOpEuAKbGbiKKznWIUfzRT\nLnd88DEeR91g6JdQChKcfdhh3PkrPas15M2OFji9fyrlF5XmPchbHVUwu35A\nUulteggSyzkevhSatGZ7nkX3QOBOTn6i2IJCKz9IxSbkGeHy9Q/5DcwJ2E03\nYXL7kIQCmmO1SzBbC3nyfdEH0DOhTkVailqASXg0afwEgg/chosDXogT+Mo/\nddt5uQPW7YCMqJsllqnlxzsDSUYz9EspCeZCIJ/GGFkzgdiee4CLxN6x6pap\nvBA68gzi49ZKl6i08j2lfP4ovcicWwN1H0vpqz4BGKWXiKjBZQJqZoYshxUa\nYnTGImtEmcnEKuzZrnxxPgIiumA25eFJZ/MpV9hay+xVdt5CQ/zn2dLIrb3X\n2yDDv2YyO8AHC919RBfM2urMj4gPtVs5315t+sCWAUxEzlZW+cm0tXuyjHkg\nQ+cv8b181DTJzweong8mr25AxLTP5bR7YNi3ExtFfrASbt8IDMGo3JdQLAv2\ng+JuhRH5/scKyTf6wPPKMP1c77AXgDGrjCvjHXwUk4ezJdmgnatPjfgPwyea\n4K2m\r\n=UlzU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5Pm4G5IeuWoc6YioC+U6G2MxJrkKkJSsP9ru9zs6QjgIhAJvzl2VFvnOQZN4nI7eBO/6IUhA5CDJOTS6zs+68lnZr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.447e31c6.0_1586395005010_0.7934316332986784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","@material/mwc-tab-indicator":"0.15.0-canary.d6dd84f7.0","@material/tab":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-SqC6gDxtIQAZS1zcYHFwsmqsIS6GGdPfkdj1P188zIx6dSFEiONIXledeTTwTOpKeyiAWvWmo8Gv3v3F6ZRbag==","shasum":"7ccfc18561ea0a48f013c64caca15143c7e67c60","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmCCRA9TVsSAnZWagAAeHcP/21h8Rz20csDIV79mMOm\n5mcz+7fxX48VC99wiqUzXkAjdNu+K+aq5lWzhuaAMbCYMGmm8u3RNqR8Nl0X\npAILwYcI9N6I3l9B+hcBYWauOtuDVuPDvgt3a1zz9772uMvDsDJnt8UonRkK\nA3TpmdkT+OcderkmDz9Iwtg4WUU47vAU9KWKTZq/qoccRvPxNzX0fkvOcjkt\nH4f9tF0xqr7V4n/38d5yZqaIvCOf5lNPnIUJZNfXSes4fkGXC/1vRrPxUyzT\n9KxNXetEfor04QdL/KS4vXbQYu+tWy8JkKjQtthe3HRi5IkGa5BnkA4I4I3m\nj1DF7RIelb3u/ijXo3ADdD2ZqJwJBq0V2zUpZrLfgV5jIHlNj/RCa80xvGNN\n9K8LSz2OUY/2q95EtWjdrlyPEMDyjD77m54JrnddFIePds6k3cI/TcFyWKct\nVBxvC5HViFpdn76jrI0ZFOKcm6xz+w1fMfL60fkP0uoYcuMDno5hivEHxYAa\n4LtxoyL5uWZGYyNnlqxj3fhDWBy/00wmUx2DYy165gJMKpzmCaxcAHnn34YR\nBPH8NH0MJMgsZmFWpC84J4qL6grMHqeBTND4E2jh7tI3QR2N96EZO0Te70Kw\nN/pIjnEK64A67htaRmF7XJMvNBiRwHgDiUV3o205A6Nk71dNcW4m8x8AYurt\nppIo\r\n=JOeC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6zJQC8+2GhBQSSZjzuSUemrcgCStpuFA3NmcJfdag3AiEA0b2nc8u7q5J5bxxdA2EeRNAHfD+ztdKxYsy0FzmxaCM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.d6dd84f7.0_1586395522275_0.9085680707770865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","@material/mwc-tab-indicator":"0.15.0-canary.9b03ee68.0","@material/tab":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-94pU4LpakwNbtPN/sOpikVCBvpb5xKFTtF/UddeCjeas0iKAVfd3IrSR0vlDGXcD1SvalH0EvPO+sQd2QbJ0GA==","shasum":"5ac93a6efef9afa1dbf3e767d64442709165e190","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej394CRA9TVsSAnZWagAA1S8P+QFgc6W+6ecifa4DNfuK\n6PLhDEEFX5J43NS6U/lTcLB5vPuBds4YLDYCZdRPPOHmWE6o82gpd/ul1MRW\niOhu2lhTE8OUOPhGuy8mIIMF+CP5Ypy+XwgmE7mKZipc0u9DHVMXhq7LnMY+\nlqX5DbfN3UzRy/ScLoXkMcUuWWtSXL1BOWpBOwAh6QO2TNMKLfS22rYYucDS\nCNxkX0MxLRuPiOsMILcHKPVCIJLTG4U7gSRx2KvpN4PMYOuSciLgY5FrDADF\n4A+H86ypihIJeyA4J2PJL1TKe/jnlK9eUa7JKXk8IGjQTd2g9Eq+bVM7O6dr\nIui6IscioJEuq2hC0D4//YbFqy5wXl78cWNDdYKh41NkRAINdFg/jRuRkJbu\nx6Gj98QyukZEbMtWMcKCU/yHJ3cYZilS/nEjKGutWrhNCQPgijofXkFUlDn5\nM9raB5/pBN94f24rjSB5I8p3PXN1Q1Z+Ec9DfiKfpqv5LwVZaGiuELtUxAP8\nm+OemxReGeZy6IejsZsTg4wJ6TAUHgihH9J4jvOzsu6CtX6kbIlacq8xoRrk\np3sRvsR+pZHciUwHLtmHnaRE1m4pxzDyZEU5n5V5apbmFEb5tubwfmB3HpIu\nQTMf08mf05wYY7qRKwHELF2T7K5vU0ZSvSdAb6bQizV0Ltbwu7BU9l0ZYifc\nvxg9\r\n=8gC5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGldhqIsNhu1dG3xthLrIBaBSo8PP9wh/8FnNNkZgzBBAiEA32WgudLfgNyGy44XbEi6EixuLrxMg5paGyQpCnqq1Bo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9b03ee68.0_1586462583710_0.727688843299346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","@material/mwc-tab-indicator":"0.15.0-canary.bbc25b10.0","@material/tab":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Nv+1FEbX9m9myEkyDLN7UuHeswuu6F2Ngr9VXgmJnuARXMg5D8fam5Q36zvvAVC2maeJavG1pslee5PzklvAcA==","shasum":"3a0cb57404e21878d656121ce0ada2521e31f413","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcgCRA9TVsSAnZWagAAlBQP+QADVK/AcAWu05B1EZHM\nJZRrsqfO/YPH5wDybAO92TeqKJp41rZgxnRq2tx1Hqr81eo7dZOlYDa4T7sj\n4ORW0kb9M4OHkNfaSKM56VRoQUHcaVKPvDfdLM+s84/8w9DGC67Lo1HDVuEn\nX/qkcEGKUgig9rc+auSRic5fsE9606ufr9KSIKbQ4ysMbqyMRCKFSgi+kOE1\nukdj9P/sT6+Lb3TNYyLbidXg85IKrD5AQpdgCDtIzHc/Y/J86keESleBXV3k\nkNdT/v4BUJzHnhfyx7xUmXT5GldMrjMHtUL127A7km567zOZAtQToCjoATJR\n2KAFIaPirceIJL5aiJQFKz4wbtxoKMuruNyFOZCIy7uf6mZWVcqzJ2C1lyW+\nqHL0dzFl7CaY/FJhJyLnBrRsCyCfd8/m6d9Ukb+ztb3i/wYfmIk3Yo3MAfMk\nLs2bSCrcu/BUc+q9IFEGaAnd/8jpg/4D9Pjspxr557IZdgvaI1ideO5CNhwU\n3RgnyaHic8tWBo4JIMG0oziRYkghqtB/Pcx6wnlWnfQcnh8wuFuhrmYxTylh\nLIxB2Bh0QP0kWiy+a35VRoWKX8UI0sWgvTlxmRD/W9MGVBzKSF+AVIHxG9ip\nw+zKqHReHLR/scIzDLtW0j7ogPn1lb+Mx7cgfQk2VlUgmMl4Wf4Gld+ysESr\nKGr9\r\n=RI8q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa3pR7fklKiQvEgZtp2FjATaHgQo2S4HAAe9Myxn4DZAIhAO2Q/hDv5MLNzSgaQna8s5szcuK0ZepouaIrqfdKoaWi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.bbc25b10.0_1586558751739_0.4557177936425467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","@material/mwc-tab-indicator":"0.15.0-canary.339cbfd4.0","@material/tab":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FkCxL8e27nmXxVURqiRx8biVFaKNy0bpEuLimTj3+J/QfeIvcCQi89DE9QnokYE40krHp9MhdeD1duTPVMppVA==","shasum":"c29b7af582f2caa28f59bb647f9ebc7a5e15cb7c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0avCRA9TVsSAnZWagAAHZ0P/3v65d1jcz4j0tBAi5ir\nQLqZgqPSrsX8eDYk+rAG46hmC5qzIPkPDKNB5wSIuzTUrvkWgQDifEnItOD3\ncpjxAMhnsM6tZ7HqJEi27gAB86GBYRTB+7+i91IYrbIZUlo0K81hG/LVUEru\n3LGKQqmACWEi+ZIvY0cTdualfZEkvbboFt7m7w4ZYWPL4N/ToYY7jZGFCoBd\nIM8zHqmJR/Su4Br14p/rRpRM2lKu+RksHsmlLlm6Z/nw6Q/YGDzVZkoY1KLg\nB/f1mIf4Xoz9bn4TOQGl2GPFMTWUIRAV47HSdOWJm2KfIabEpEZYzAjntG95\n0hk7894mE+Ii3e23NURv8LI1g3thHdTvZ7hRBzMrrwywoBy5UACIDM1150bU\njhvirWJlpSBtOusX9FyisnBXIHQSHBekkUlK9MCnGdB/yqEsN7LzNJFc69X7\nr59QApCKswh9NRIVnLLjlX0oCDBlIUmI50Su3jTJjl/dxMIsffJUevJGUzab\nptajLErwF1Kx6HxhO5iHfqW/xYfq4jGEuFzuaJuJTLsTdOtO1PZ5jpG3QOgg\nDgSncr7UD6qDjGHttWPxyI64QINqemm/QcOVR/tEHZktK8uvCn3FiAJxuD2I\nZ71+3yI5AFX/zzyqKYSPG0OAdOngFIjRTKEV0XhhAee7Tc9TGGk8Hxus936H\nIxn4\r\n=MQQC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNMYKnjMTd+FqEgje8UcVznMhfrO0w4j1goWV94ExbXAIgGl37zI0BwcU4XoozegPMawESr8zD+ePIaDnYDwbKSKs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.339cbfd4.0_1586972334795_0.6162169569009661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","@material/mwc-tab-indicator":"0.15.0-canary.b74ff19f.0","@material/tab":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SdOqNg2UgqyIIz6EbEerDLkjHc+ZrMg03Lteuj+CBlopeG3yn4iyDOOMcJk3IOoZkpbejU7z+ia8EBbrzwAVMw==","shasum":"69a24d809e0856887181aca2241e24850cc31f41","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jRCRA9TVsSAnZWagAAGh0P/0GYf3MsDwKOg0yd4Vwn\nsuxHKTKVyJCR96ZIuBbAwExjlVt9qweJI6dqVY+S96kj/qwcUlhrl/fkaB/4\nR4d9zvt2+mIVNw1wLKAJt9DkY51sYUy3Z04Xxr1g+xhVf7io5nSURgCe+txL\n/JQMoxwMPOY3Jvs3YtfhCnQwFjVe+/I/rqWw1A3Gb6u7pPuMBmO11RKaIUAi\nnFjddit2S4MEXSgbP/uINFawE5TvTo4Oirf3oTtzqEDDQb4wNV5Lo2+UmeQf\nMCOsudziax/BY2qZLiNFO7I7BH23slU6L7l5Fe/RJip9V4mT2VG4+RbwQ7fy\nMs96IQyxvV1yphZIYgQvN58STLxNQpsNDtyRGvPw8FlzHHc+g+yXG59smEBA\nKl1y2BmOmf8LTxtJor/POa+WoHY4PwyZtROVxu3OuecuaZ2iPJfbeUQ9Jjq6\nV4YfbdYT1rU4tyopp8D5fYjWnFUB8qwTCgMZ3/Nkl0hKrPiX46Q80hlo981Z\nHdU/Un/Qjxfhtax6Yy3oiOI7GgqLgEZO/oxdUdSttq6sJjUOQAV9HxqQj7f4\nURkgK5F2hxGQWCfgd/iNTm3Bg6/DYObHb/kS3RcPLYbrVBnLE5ftBPJhZdTV\nkYUVmSboRH3K3+M/HMb46dW7KSJ7rZ4NuIgRKDPQIUB5v/WFH9qBT+MoEYb7\nwEBI\r\n=WHMS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQit8yGupFdwiX+gTVmFM1igAa42vtE647ye9PKr598wIgNCgRfKCscE8s4M9jCd718SDi5qqVscXbqYPYEEFW1rY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.b74ff19f.0_1586981073236_0.47724617974067374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","@material/mwc-tab-indicator":"0.15.0-canary.aaa16853.0","@material/tab":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NhxhH9qZTeZ8iWGiMeYV3mhH1h0FkQrKrWGfvPEbI3oCvHO3b3FyiAgGYkU7ar7lhwYc+GPfzJIQc4+dOEo+7Q==","shasum":"0663a781f1529bb3bbc6bcfcb557b7e500d8b98e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42KCRA9TVsSAnZWagAAEmQP/i/Sc0fM6Esp83XTIuGc\nDrR5WpuoOv6W+NBqSa7NnC9rQqs6rFH4CVaNs5zAnz56L02tuMbyItEfow7A\ngG42800d6Qmg0I9mQONqWqbqmXoRLHudDrJ2FYZJusrEPp85sPk/cFWoaGrP\ntQNftHSanQutnju2YMW404jboXezUzTRCgcNlaoL2hq7Zz90BIQ3jdCqd5yP\nnVn/HAtvEFKQeBIbBbkO6lti26QJsZqsaYgBexde3P5JCtQlKbBHGLb/QKrC\nraASqn5TCKa1fC1ntCiflctg28n1/D+G/B9LDIKANxxOia8b4CRAiWGUTZrK\ndr4n6z+5OfnaGHJ5LH6DVSW/KF5U336GNLDAFEo9nnrh1j/7X13r615zOiGo\n3O6ZRvXHCuJs+R/CSQ59WHOlwGbFKOogQLO7JY5Z60tX/rghbAVsLOIqP/GC\nsHhjzTzEbaKmVD5Y+xuxdghsVEd8m/O6RtB6kB9LPDtvTOrNk6iPg52v0cN7\nFGhbcvU8/B8D4wF0oZaG5biClwl2Ws13koXHYssJfqyoC9HDV4oudTzXI8dI\nKgLdvSK6cRwtzMCWhWAyuPqU81FQy5I+iumCkHs9/G4nqBLbS86LynqdVMa8\njyIOF4Ebl6Rto1L/9UjsSZqRJYkUS2Qcde2d7k/fNMzKwGlx2hZN8EGngNRW\nDP2v\r\n=2lrj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7BcOsaz3xypWrhW8wmkU80MbJfKcSGl/1MDq8TcUbDAiEAr4l8BrCyp+6YFSO9hPVd0ApyBcCTN39OVs8tSmHVFIA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.aaa16853.0_1586990473982_0.6575885564071469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","@material/mwc-tab-indicator":"0.15.0-canary.826b23e7.0","@material/tab":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RNo99sI/xK3lvuL/Nfqpg609BqD4Ncp/nZQdQOzD7/oKUWJyrLwOaT4/87hzuXNeqZ8eJU5MT7P5hD96YmNXSQ==","shasum":"c071046b295016dc94132b925eb3d5920729c25d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqOCRA9TVsSAnZWagAAmOYP/1l9Y0s1JoWZJcMU51/Y\nxO1kXNBLI0pzsbmNqgni/f2IZUK62TL8h65l5EprZ/Y64UfGFuuGPwvOT7QL\nk1+6uWp9/zq6EzJnvSpL8foTbNX3uiOdD5tgTu0yshEEnOF5QRAuy78g/bmL\nT7F/hfnqJokSZMdG7GF1GijnHiSDozP9/9ftsvw5GUkYz9ubMJ8Rw2wB51jG\nI60XdQatcUSQEQyUczUtTxOqsoY3ft5+ZFm7p/64VSnF93ks5ccC+XC6vucw\n+p5hHxIycIh67MJsm1BCTWBNnNjnu9eiakeUP4G64hEeNvV/za1LeXRBM6UI\nOOCkIRcl1PS9oTN0eBMSjhWENJo7ln3blOFAaG9fhyzqC9qQjd973rCjcSYH\nlLNgww28K/hPIvQwTR/eW9c7du2lwxzqYGoz1bIM6YKyf0i6axv2fbfMgUEW\n42CXBzeiemdYi31QTdMP/ZbvYxTsxoUZahUDnvzCJYzuj0ULy+1UFjCKcuv1\neNNgVMIMHeIb3JTEMwqQw3fNQnwK5OF4SrBWLpNLqH1fMyt+IUtRzWdLUDJO\nPYyol6/1sg2SO6eARl7A9bf2Gl4m59dV7rfoLnMbozVT718opAWkiiGZAyrS\n+yd6pJtESZS3bwBzcU7ZLcDJi51+h167nZnNsxu0JuVHEKlI8LzZrTIJdSVh\nzkcG\r\n=Ikkj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH14mJ49+VwtBSP+P78nnEeUSr7k8o/xlfMqLKlSa9pEAiAZ9guWWRjIRAaFm7/X/N1eD55pmjgGYIyuI/+p9Hhiwg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.826b23e7.0_1587063438508_0.5857674503855366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","@material/mwc-tab-indicator":"0.15.0-canary.e1ad2b2f.0","@material/tab":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p9BTYGj8DtIz3sCcnZr3+TFPv9LRb1wpl9mkWfe5fos8Zzbu/2ofZ7X/0hIC2G0GkDe9Jm4XaplyAEDlYDlsPg==","shasum":"7d8b5a8eec406a3070bc7e2d38dab29ce8b6bac7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVXCRA9TVsSAnZWagAA4RIP/inHv8B+zMPU+pqBtblt\n+Li/axfae3OOPxxgzHjekMpI2Br+TNCZJ2zSaII9DRhcb/SEZ2MgoU2tN80t\n3GivdoA68uCw/m6yOl5Bn3zU/8rh93vw+743OweO3+YMi1xzyATNmdNhw4eM\nTRnOAQqpCaEXcoCi5esOUNZ1NUD2mkOeIJcw3lMdq/6okUGLnNjXYNyvmulZ\n2C2ob4AYY6s4rHlWaTlHLFb6joAJMRCrlrBVpC7ZVfDYN0OjwWm5r3eCE7jP\njf2U0P9OIAqfcm0kMx0qH+4wBrEGzardK1qoKXVPUgp2DvabIIFn31BbRQLa\n58RjY1k/x8yrG6w7lW45PrOLoPOHQEjmD4w1xp/RHzLJbQBzhg3UvWobZULa\n0n7uwG3QzM1NfoCF/hb61KaQitvgiJCZfNOYeZd6DnlLqk9/GG2ErkBHJQ0V\nIzZIHtgFAj2JwokQBMgZs7S0Wwz23oKExB6kcbkuXGwwM9uOPV+6KP518vMS\nWfNpcLETgHedVEDaDOQ0jZQ0HCi4a84qT7HStcUWT999YHbcym7IxFJ/ei+a\np4OInvmuU56uRTRVHWxvJKre4hapT7eUrD6mWEeB8/ZPVp2F1Nhi4f5r9S2y\nuqFHblQX+/dU8DMDL/hEZG1H4oJyW2e5SaXAA+v/Iawa4X+sSwxUMEPIrVU0\nKQko\r\n=+bR/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYt2GzDIDwgqbwzUKyWctEiGM6P41IWNDETFRArekqyAIhAOwNzDw3zYtYrLWMaqhBz3eIYnREGBJ2YSeEbZShlcFC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.e1ad2b2f.0_1587164503095_0.8278554236129434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","@material/mwc-tab-indicator":"0.15.0-canary.bade5580.0","@material/tab":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SmDPG2TrEIBIzvBKOApdgce5EHbPKv2fQ6oMTZAxS4jq5rAJjOcFmcGgxV7dMZk5ga3tOWCIhLzgGN/n8tvMaA==","shasum":"b96e9fcacf1a6898fcc687a6601163204a73984e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmBCRA9TVsSAnZWagAA7DwP/0GoYXNGu9iIgfTRHWBr\njWIBwZIovMQyZmgCsC+AmVA7c+zr6rpuXC2hn1esxpOfDS9yanvTMSKOOTar\nsZ1Nb39bOQ7qTpYoHNnay0xosMB+/4kRbBvTqNazSlQsFqxAMzJIsVKSgdg8\nl5ozhqy6pH5lNmC7n90B8WAyzX6pc7yA0yH3YeJAX2fm61o5WmyHSgQAdl1f\njklE2iSG4zMkyvlnEI+1GQjNZkktnyzcMsM0rciOYRNGOWVSa1Fp9rpNYVqY\n2kRuN20EWszWRHsJS0dU9dIC7R4tuY9T2GFpSiYYpzbTn8Rk+jPI1wpRLoP6\ncjvZX72bP98Qta0qy5lBWf625h1dWkHPkrTQ20zlGjyrZu2/Ijw59rpDb/B5\nZwxcX39V/cY9bhbez1QkaHi4MI2zkzsVq324RELNYKZ4VZtKa/6pwE1YFTtA\nPJW7ldfKcHSDgpdHb2bRevGLW1HjHsWVryW8pJDY9C3R26C8sZhOOEIBGQZd\nJvg5CNprz78ecGAeS2ZK3TnPcf1O9VXK/J8tam8RJckDv6iEimLy4tKoanXb\naAcnyMx7xhcYbXMBUldzsgGZ0ayxPON0G8y15Kpd4zRfX6WzQG7aGdptmC/J\nU138txsmtBJzDDQl9ogP64beEWtQhXg1f9NzeMeZUk4ZFPslvejUQ1SP+tsf\nZysw\r\n=iqKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrZ8MZaWtpuc5LTc7gSIz0L4jaJcl7hgveliQlUk/ytQIhAOgJoVBmiBlaUQzJIy/wqtVE409K5/+FPFCnee1Z8tNx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.bade5580.0_1587165569056_0.42987857328292445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","@material/mwc-tab-indicator":"0.15.0-canary.dae38247.0","@material/tab":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kZrjvREx9JLlSUvOEcaOi2awZtJHtSkf0CpiQX8wiG5VJtN5l1b2eeIhGoGspOK7GIaytxWs2aokFzfPRwqRGw==","shasum":"748ac8579316a45cd9b97b1100249afd7b959c6a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbXCRA9TVsSAnZWagAAqAgP/1RTh4kxLCriKCmFAami\n3JoSZ9MMHozNXKoUsMId1bp/0GTo32syPXQSpIj9O9xDpSC/V8oCon7ws8By\niZsfrfMIvsM+0Auc5nuhSt9Ep8H/4Ohqvt0AIctjc1JAUamAcnaRvBaNMX2j\ny1u3oBo/l0NU8OnqPr6InRaJzSy593Ed0aXDYcB8+0cjo9z1M6rthcNRhY36\njUmOGG7QR/jRx2w/seoCmHo0u9EzMMPzmTzT4e46A788w1VWgDpWTO6TA0hr\nf8H/Oy7xodZWChaN5PJ6Y8QN3hg1A4TD408DvclPahc2AyoEd/dxqz0q7r6g\nZhnNiX/fVoYPmRnWGIbI4t1a83k5AKR62Psr415Q2u//IKwL35+iDg4y4cYN\n8ktaJR2yRu4BVl8FL4K+tW92z3uayZ8jpwaDIg4h8M8wyjgZzONGLhOQ+lXS\nkeCrMAIlDbBOFuWHDtJnDvM2hmzWsrnxzbI2E0m3SGlwYTA5+1MNBiQ975J/\nrQWGto9b/yGFlrg68JO8qoa26oanE3ohqSMPWeGiNe1zpgi/QiNeH6TnWQQo\nM2G51iE1la+zBxsBpkP4MbUWAcGlFxOecEPGne/hoWPGrYzMJHCwwHNWKDaC\nvOgGzKJTy3nLDtZQprwqO3c4Y+ympMcZbGS3vYMLihCLEuWMqQLBar5fAqUL\n6r9N\r\n=8kGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1fFNHPukFSJusVHNX8VftYjV2bq+f3ykmtkCq1bgjAwIhALeTb6jF92jS1sB5cVkET7U+M6X9ikR4o0U/RL3R4ib5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.dae38247.0_1587168982711_0.5915794286563858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","@material/mwc-tab-indicator":"0.15.0-canary.a04c0b82.0","@material/tab":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bXaqZW0xbuBQ6VX3tNXt5INv9OLT9G0ayvqjbdX+7GDgapEe+l91x4tHRR9vlx+aYI7lCj2vJdYYd3bAmSYYHQ==","shasum":"1b26fa45eacb85134767f0c47921fc48f392e139","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksXCRA9TVsSAnZWagAA88oP/3Zr+9RUdHV+13sP6dZ0\nT6EBMOwtPyFcNOD1Z579FZnh7yL/sR0I+hNVHyy5Z8JVbPiJ72aToveBwPPL\ntyDnNdUG2N1RJhbPn+Rxc8dIWxSuB96Uotw9cyhxaxfJ1UAzFlHp2Qlalgh2\nIXM1JIYwWkwZtC4w8VmycGijUJ8Ej1nN7f08zBmQ2gFoEIGTuEOwJfRkTX+y\nimCRPflFJyL/LO5ucpKmJjDwMSIDuzbXE6zD9lbFshSYzLjxYyMAMwj21lvd\nprfnBvtEVEoE3C350PM7Z+3vpcFWtPEbG63H7h+oi/BTGzA6SwgSy0qXBSee\n26DmgjBEtwz1IUUK1ty+cwB/Ul0wjXi/n89aEIUtwT1VTGMRa6AMZfh0ESQ8\nQ0gDBV0yjLhXDmmZ6aPxvyzaOpiPkM2ME89HhcZu8esr+m6QVyyHu0SpeaXb\nhNyuhNoM3Hl8FRAp7piOokvE0yadATgL7U/him+f5lBqArBZhwsYA37Ks/pf\nWiBhlwaCFqCx2ibSK/A2I4I4/8n+uBgXj1yG7bR0utrr3LTEOKrfDbCvlkVy\nRCDeXTjsVUc7+WItf4+FhJVhW861Hu3qLVp4ga2Q9SBt413Crm8IvPS7SFMk\n6U7ImfO3q/FZJLwvg3/Eaex/pXHnilW+6tiB7EmwOP1GKFoUI0h30JG0SmX3\ni0P3\r\n=k8PH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC382OmTabktscJpQDMDEu3QqVm+/J+2x3dPUk1PVsn2AIhAKN9giKuEmO1zJKgp6b/PMnpPE5ZMbVyWtP+pKSC/z/j"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.a04c0b82.0_1587170070926_0.03501944512381239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","@material/mwc-tab-indicator":"0.15.0-canary.715decfe.0","@material/tab":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8PP6v2muMgzeKjH/+RTjabHbf0/esdLQQPNOhVg+HoAoTTcMEgpmfSOj6pjKoKA0zXBbwonCzIe8r/p+dmo0vw==","shasum":"19f2ee0adf307d90403b9d75e56f9b35e32f7e7d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetwCRA9TVsSAnZWagAAl9UP+gKDGU+KScUX/Hqkvo0U\nBYnwTFla2zov3nht9vqXE8s5T3KX/lUmijbbDptv2VUfZY3G+Uz3ULk3si/0\nv7pfqfKzGYF59f5PWn2o0eDh88SONhljWFBBd4HgTPV8+LW5CIEu0gQZ00CT\nxNCPiETGPgy5hm1+YsTjh4w5tK1H2VVbx9tfDxFTku3fLHdpHfxGNB5egf05\nyBv40kfxRlpS4RKMmhZqqLSdoHDJiwUddI/O/CLwDZpE5agMoghdFARYfELd\nuypRF1iDNKAH2ebaSvwt4fqC+1qdC+FSwf5faHZO5o400yxMscSSSYeN8zWQ\n34iDRK3q1El9TO860f6rI+rDNOAn/4A/KjTo1Z6JOCa6/pD3qjaSM4s9oPA8\nKcanmHhfRP+JRjiY/Nq0Ts9G6y90j7XWFt2sNOqAHzanRD4P4J7DyZPH4JA6\nIQmXhzDPqBR5A7yTFVOl8oDciD+jl+qwKOQXlJI6GuopD28f3Me1ptAn/p3i\nbg9/SX2OLNEIIcoWG9WANnVXe1NnEWuVs0qBDNG1hmXGO7LaPB+YZx4VyNEp\nDlXF2PjBGtcUt82QN1ozVLg52ghAh5BzevPD08oXrO/mB1N5FiJH7l0KVZNe\nb5LOVMIW0HwfnFzkGJvLTm4oWmtmq6xkoIwz5JAzNcVtKTzV9nHvo2tQ/u7S\noIMA\r\n=mS7D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgvQRc5+QJhZlM79VgQKWdLnD6tr5LUm4JodKQFHcd7AIgduXosKCKrZ9c1UIounk3E/8Rn2vw7tn52XIBzjBCdXw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.715decfe.0_1587407728468_0.6057692367327219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","@material/mwc-tab-indicator":"0.15.0-canary.c862cd04.0","@material/tab":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d5aFxZKPEVnWDcnTovXyEi7klZNMoyCU9VayFM8J1ZINiQTj1cFP3Ubhy4f1ekWVn1JKMWHbbQCpxMVSrEp++A==","shasum":"9f3c18faaf90b706a506518269ffafcd378c8de4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":69637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVdCRA9TVsSAnZWagAAF9YQAKTTl/Epo+/zuowiReil\nj/IlRObfgjOU8SIZT1p5p2d8icLG09AR+n4ZX+/2zFxi6UnL1d5YR4GTmBIP\nGhWD6+kGvjiIwCkNYG9tSyZ70oueEtOB31cx1mBXoEIIp6d4VWBQdARYXLkU\n7+mBlzn5eEJ7LJc1zjU8XtMCVHdcUvbdGeJnUscbfQXjzU1jdfLIk2Syatru\n3EWFeIDg4Ga2iWEqY70pvLvd+5UOnFM4VVYOsYwovSkr1KLYhGBcYRy4JFbr\ntL7Lrkdm3jBbA7FBZrvnKjMM8GHNHpBOjq3/DEWRX5qvhc3ho1eUYZUTzUJb\nS/zS21vIUdLC3BlSXKqkqDeEkXvXnSa4rNL9sCZ0s3zcKXNXBHr19Mv4Kubv\n/aSlZ4CwoSKeLmypFXwCHZZkmWI0yNcpf9rRyvaLC0HEvRVfckpn1cTDKzgn\niCqbJsILrqVPB1A0t7xqvs3p3lZnRKLahQkZec1JQ8bX0JZMR/qSkqw6aNyq\nxBoK2zXlXva5qQ3RWtbgmCNq8zQqqWU9t82P9T/LzjpzSoeSN+0lJ4fmUH0W\nMZRGd8WaToTz7gpMrNabBlJ+T0nbXxrESKH7ZLmfyQGB5P3uTAS2RTnT7Ts7\ndE+pURRHt/kqXPeBtqRJICS8Kj27CL7+bpUmy5HPY5rSYHE9nHvrS3QM+ef5\nmJSW\r\n=/IqU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHUPcfXi+kgYWxZ4aPwy1qSimq8kNqdhIAawTra614LAiEAxbDcBkfe2yFnwo598Luw1LXvFfkz4+4pD1MZ88Sw9I4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.c862cd04.0_1587418460991_0.68507884827124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","@material/mwc-tab-indicator":"0.15.0-canary.e9b01b35.0","@material/tab":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AtKRwDHU/MvEnaBbTIz0kUIH/pWKzkymzz6nijeZqsYNe7sdBmTMaMUYfDHDAJ4ZUaoZIabdkkMU2iB2VyV/zQ==","shasum":"35fe31321a363e041d2defb6b3488979e06f0b6f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBjCRA9TVsSAnZWagAAWZsP/RtkTPuCHW5QmYcffNgW\nlmChM1hEbvhuYZvg+96uIdkA90Cvd0Fnl3NynXKuPgpici7/uWR47DazikOP\nguPrWkKBGr66nBNeQnxKicgEuvgdyvDEa3zE2N+4VqpGvK76D0HxvIsmWlrb\nP2oLpiLXt2iJy5/t50UGnC4u8B8U9f9gXEOU8WwNQrYOKD4gfPuHrXZ+ic81\n2qSqy98z/u3qEK7kgJdpPKVYTgYdHQUkYk0uxHg79+8qk2f9K0BbFP8FGLPN\nf4sZWQSbpFcjMWuhHNRjHnqIK0cigZ5qfUAE8e6aerx/KHigF6VI8VRSrSL2\n3WZqad/Pe8hMQhX3kbOYmiWvvJyn7b7IowVH4Gvn6m/aIR+EppC48SWqz5xw\nz56gBkVKi5edhzenMJhQam7sO1THEPn/1o25aKpfDwBhyKockCEXWfaNbP92\nV3BhRFvJp7WEd6ff97D/OnTo1m6F+JzTbZ/OWgYrJ9V2ObkSyVvm12eLbSwO\niyM5cfYvkpiiDOb/HYj7o3m9BKHT2/sqATzLlMO+NK+2YXBFV9QoEJ4I1xmJ\nUx4uWVe4Fd8O5l7QRYQqZVgxTC/vT0Hp4fWomDn8oowkREhnQM9uwTsZBjdy\nQd7gJ+x8oz9EE2rssDlePLVv9d4gVc+mQo2eyuBWMbCFI5rhcbV5pBTWcuZ5\n9A5E\r\n=3sTF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/loobpa+TNr9P4kgI/px8tMMT6rKlWa43Wxs9lJRmoAiBnjC1W64ZeVeIwpvioCzEVn10m4mMHlGSvafXxg0sttw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.e9b01b35.0_1587425378775_0.981349675781108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","@material/mwc-tab-indicator":"0.15.0-canary.ee7e8989.0","@material/tab":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aam5QShuputRErJWqfyYOvUq2BzzPG9ga/pA1Z4N8z75RLl2wIRIpZvk6LFOM8SmqIyuEtwW8UQZGYIwaaGcWw==","shasum":"98bb19faa5bb997842a93dca452f2a6424893d25","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOSCRA9TVsSAnZWagAA4BQP+gLJxyYCJ7otFRwYhWlv\nVJwz85FbzDG9DebwwPdlJYcRNhXkD3fIityS7WDOILUIKUbr4iYBLhx6g9Hk\na168D9YWTsDfxdtHdA4elpaSzviEO6Y3Om9EAs0Q4Gpz6p8Bo8+MOBLQjUvJ\notduqgsg81Zjbv17QhLLI/Yf7UugqAsRIh1Mwy8BRriZxMESp0xTHo59D9P3\nzzZ6ZraO6pbsIx8nW6NiebRZJtV3CAye7hFzOPW9b1HpX4b6aFGC7mLAX1/Q\nQK8qRHRtg4ENCDiKCAeKCyli+L+cAOe61TdEAf9oeMUjNag9KtSkWrXi+72t\nXCAeDnXwx0dTz/9eUpDYkJUw9x/OX5nLpjUlYUch8pDU2cHTGqpdiBhsqhAH\nwsV9TXwhcV5Mb01ni/4xIcpMC6xYUlLmjKcvVpcqHkiI6kLpfM3kqEicWtih\n9qr5SGHQC1+MhMxzFA9ly+y8Iz9Zi055TTspvaVrYXDMwzy9/pF6LBCYsY4z\ngOe46p8AeYiNjmNXz5EvTKHBr5i79BpCykNf2xGh6CwEOKDFCtvrnlfOFA7F\nu1ekLDU/ApZR6tM/Kn6uaEGhhjhyCpEI19NbBCGKdNaoWBLvw1XU4sXfL8Yj\nsF536lYe9BcGWCsbWRPaiukR8aKLJ+mt2fzOcr3c8JipdGEGRRxqq3NPvCMt\nLGSh\r\n=V1Ya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqAImq1Rsr1ZdzBYBsW+M/8XJCj2LNSBvSYbJ7cEs/3AIgIQfPNjxSHcBnhtepvmwuO305T/R+wYO7hvS0/huqFI4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.ee7e8989.0_1587430290289_0.36522290209547803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","@material/mwc-tab-indicator":"0.15.0-canary.9bf47ffa.0","@material/tab":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vm6jJi//MsJp/p2+MwtO/X14xh5Y9AYAffWdeGCuV0ZkJvdbyqOydZIo4adAIiDNC5ZGyjct3/pixRnjDilJoQ==","shasum":"d130dcc15f4307fbbd722173f9b92ad24e77ad99","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2iCRA9TVsSAnZWagAAHHwP/RaInL2wn/i3mbSOmjDQ\nimV+9/oSyTNNMFbepv5HOeBcB96l1d1kDCNSI9fgf4ca3R5iEpt3pvjfMtef\n6ijlgH/b9rQRs8t792feuHwrsyUhF+ZRV2SvtWW4TtjC2atJT8d8iqUUtevf\no3YrLyNeESjfFP6LFPiWcTe1FbNzqKwXH+KC9HdsOwtufm836zdch96WkU40\n/0iwfEqSPX4oCHG9AdL9Yt3igQl4n7fvhAw9PVbdJ0H2VARGoXHoIV7EmD5v\nOhsFiTQ9YNrWdh2AxYArdw+CAOqYqiYIw7jTVquJ5+ZHf5Bnlh9eTjVKwTwG\nyNIZCVXa9OI5XPXOKbAJHmDKG+5NW05BH9kX9qBpBmOryX+4lKqLqjIVxNBt\nVYG/E1v2CCb0mcleGb7WJxcttOPHtx0HtQdX9u3hf3cwS7CjfoscPw0hbyhz\nuiUvH+6KzvQrAOnECPXBnyOkrrPLcDzbyxa2Ors1kJzkCZEfrRP458nU2m+V\nRs4DQ6u0C4vOpNEszRvCuFFQuo3d8fgJwByyjdbDnEn02SaMf20FMxyf8afU\nTxsyLBkrrcoixLlazh0h2mg+CBWd/CocpH4PgBC0wKWALDBQua0Kw89rVhqT\nLK/0rFK7+VpHPQm+/qWcu6+v1RrxQh9F17w65vJqHE3IaabsDIbd+4374ggI\ncSEn\r\n=k/x8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDF+gfOPEDQNsDEZri4MtjfrcF6TQpdnEM9tLzW49p8FAiEA0sNttJH8zZjeRdFmrvz8CPEV0hkp1ZSoXGzpvbjYyAE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9bf47ffa.0_1587494306532_0.5252635701366497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","@material/mwc-tab-indicator":"0.15.0-canary.078dbd98.0","@material/tab":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1cNagzPufS2HdysO+OMnu6u2yUbNZVz8LVo7rRZnAN2Df3DJ4kYSuxy3hpNL6OWGGAIHv5BIBsNOGDXdHnWT2w==","shasum":"fcc408e7e6345ac0d9ba31d2120be3b5dbe22df4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HACRA9TVsSAnZWagAAQ0YQAJTML/vlh4M48q0mQx1L\nNdd7LZig3hwI/asNDTxcw79J/mHLKoxQNHmrFskYjFexXCsCyc0BuNWCoQo6\ncEeLH9yGxGlLzvREUyl6DFb0YMyhS4Ad3+ZHcBi55650d9HonJDRjAmmiXoo\nZGStqpDSP0R2gSXAUbwQzVHvMiFSWyFFKVlbjwlNrBctk3ufLScBm2l7txUy\nlrH2vQbt1cKfq4xJa56nIN59tXpye7+XofP+y6Cdwd/QBIOxuEF2QnMeYE9V\n8FqvARD6swBs61JjTRiDJO60Rl18LoFpLJ3ib0+r7KiOOahSJcMMuYjo04wk\nnOOUDc3hXckLSD2D//fcAaDtiYVUwY78hhBoQSG0Jc5Kxr8vc+1H75RUiCqx\nZyZ6nZkCT3c8CgCu1OFlThwZrpp4lAJ6Vywb9p4oLJKFTuqFhay817fK7Es+\nMi8Snn1ugKlV3CjA6HYMEwnBuyY0XLlpghdixBUwIZPxP5Y/TwDhFTPVGJm8\ntBOpkiaJxhFT87iY7T1Gcu6CEn/DALLu+kRp/kWxiz1goijgTrJmWBF/xzHQ\nwAMw88S3WgMNAvj2+DXahLqIHAHn7Ou2pmxjXY4cs/Mmh9H0QpXxbhiGtu8u\nhvo64KILmFaSHHA4KEpIkjWU9ZB2UdqWvhFUOJpol9uM1mutbRLDQNFVbEqD\nzfyL\r\n=XDCB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDimGt4B1HbqMmEP3uqBplyb2PIuRptlyTO4N0yZm18bQIhALAZgQzbr/+LWAIOnGe9xAzXZjPFxoJbvBqlq/EPwNAu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.078dbd98.0_1587503551866_0.96406160292337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","@material/mwc-tab-indicator":"0.15.0-canary.953015d6.0","@material/tab":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZYOk0NglYxyqx7deOMmE5ZDc/h4dcZqOdXJ2hSfgS0png5JhbWUyCMZ+pdT8feQr9TgTVl9da3wDvLgKkmiEwg==","shasum":"d63ad58b2ee7af4679fd10910d0ef4b9a208faf1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2c3CRA9TVsSAnZWagAA36cP/A631WuzMRQO/nKNVF/R\nvE9ddG8cJplIgxCSjdVbFdJItnG53s/ju7mt1UG5CkB8XHHQIm4gO0cnNEHa\n7eK46p9h0DRIdBoustZptL+gCYuI0alJJAQDw8QcmAznGm0pxv9U3PMUmgSS\nX4lK6xWg8N1xzZPrPgWO7uRt2biFdGcMEQ/F5CnzvQ+GWsXvhkpQKHfUGXCe\nAgn6Jmn1x4Sxt62aAeLTeHfwK6BiKeRF6ZTwEX9vVZxqwja70tPTFtF+8quq\n2q5EdhWz93td5RHHSBHbdC0TIDx6tjbrloxpVR5MArwM8PbVl6L8W/cJqZPC\n5COpM6L8nLeparYBnKQ32eIBi9AudkCr5V0O+qhv6l7A4ecncI+RTBPC/cp2\no8WV4B1j8nKo30t7/VFqvBAXsWi5De1BGNZBEL+H08sDXI9Cv9Bw/J0Mj8Sd\n122faYA2uoex5kuuMooL0xc2n0zoKrxKaHH7bOe9wA9IzFRjYl0CSvqpAVW9\novi7GRTaHnmSrgpd0WdRSTjjNgaSJE2SIlAH6MLeesoLlAhr3MN0E/lvnlZn\naseOvXIGWn1knV1oQuoVaRO7j2rOuuk9hRUgL0zDljbuGw4gDb7mvrfsZVjd\n1TLL3fqnj3pBjrFFgngv+rTP48vJa+3ic9pUypn+yJ4ipITFzDGnc4LUTnFP\nJDrn\r\n=1/Qy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMyB//6l82mQ0w4Szc7DTTtJ8xFye2VRJS6gAuS70viAIgMLDT7NfxwaGa2jPkbyJPS90jvcA+p0QV0m9P6jYQaAM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.953015d6.0_1587504951531_0.23385880055305752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","@material/mwc-tab-indicator":"0.15.0-canary.c360ec63.0","@material/tab":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jys/1JzW1/FD5enYwIwl9GW/D/SEFMNvU/v5ercdMM2QPJiBVazf7zkuejALE3sb4dwR/SHQtpED2tGHa+Pz3w==","shasum":"ca66ba872095df21459fd4c9d93cba7dd6d854d7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yvCRA9TVsSAnZWagAAPCsP/RXUPGyYLWBh2cw8vs+U\n/x382g6ncoe1N4LovFPRQO36SOyvHwlQdzt0h8pDuyX0cBxjcjpno60D3k20\n9CRr7ldEldM+peJgrQnyFGz3VZNfWjCCP6t9bssvOFzFYGiQ0L2m4eJwKtQu\nsOJYqNK1q7aGGYAoqAe4gvZ9GO4gYIir/Vuefg5xPZ99GjgVwcHa4EGM+dIV\n29rkX5PnapxDbP1/NzdDR8aJtwAzEDYYV78cShA6bdA7QhjN+d0oW0EeaVN2\nhKklmnTSqTXPhrrdroGYe4CWwHijQzOgIj2sRFU1JFTEbH+QWnX1KmqIvZXG\nAy2n4hMYks7PCuNItoMgXXsfOHD3Aj4+icBck259KBX7qGH0jGyUz8SaVdUK\nsVofjGb4EK7HDqjO+gJf1cpR5oW+NWbdupmX9Djb9ChqFXsttl+H8A4onOnZ\nA1vhCRWpOTNLk/la2PFz64FKF1Q6IS2SFRZIC0gSk/SnT8u1drHm7QrcBHgj\nc25PI0CJxlUL/7HxKBvNoMQZ02u/ZWGQl56azvXhnSMhz4ulE3sSZ7mnKXQo\n82vUTDaon+HJzB9kS26Lx2U9laKR8RWx27TDpYfnuU4exqB67gDR3JhyJ+Wk\nCHLKE9ZrmT2FXv96jI4khcV8HnmVkFkJ2WD3sT3TPhBoJQITGDERg/mNcCrL\nzV4+\r\n=difa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjKFOghRd0cVLL0e6kv2OWI89m7xTDm+bBTOdGsEOSwgIhALXX7O8XD0Llaak3zFe+FRtux9lTSc2G4cQKAPFgJDHj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.c360ec63.0_1587506350699_0.6270318862817013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","@material/mwc-tab-indicator":"0.15.0-canary.d71b65aa.0","@material/tab":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3NcxyZlL53aXWYtO9kEvBZ7cSvqEjr38qBy6NY/3IL2xgdo5VefzfIj3zQqEmN91SeFO+FXM+hmRe/u8Iglo+A==","shasum":"675d55fbaf6ebedaac805a5b2fabfd3e89ebd827","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XDCRA9TVsSAnZWagAAvoAP+QFkaLiejn15dcFFuy/E\nu0oHARqglYWWOwwOQVik2EqMiQDt6pKWTuZkvKlzU6ErE2rEjSRYbRCsXiyl\n3jVrDpwZ/AtsQTFcKpDMVTCb+IctjwGBvc0VhYFhiHdf4BEOKxVUl9Pf5e+M\n2Sn4WKlO0Hi9h2eEjJclbMAIsp+I8rDaiaavFEQWl532stFRSO1KNyOmpMQH\nrlFD0KzpX+KUrK/jHfmAmswJsfLvUkU4GGJC9ti7hZcNBMQsp6o6zI8kJLVE\n/K0Ni0GlZ6z4AQLsLOjgBcIV0YP2jTXHRP8JCVJjp9yEVmDr7cNpE0dkJkCX\nPzrlcObf3OwIDg3Mv6znm1WRiklpHfTj/XHSvukMtnAQ1ym7ez55m+Gq/kPb\nxExZMuR8sy8qR6ysfJPYjrdtFnsxMbnWaYT54dCBIJ62fEntha2QypMF/52p\nhegz/YhmYDrC+5j9E8zO6WA+/mKWHqQyEmp6kV2voLZwVpX2XaVdDi/B+g1x\n1Zx0pAUb9Pa/dwnOEc41oriSXG2NhZd+gPcs62znrntfqKVoDMiI1xXMSYs6\nIZrapFeVkOFZPAbMHXDS7YuFMc6f0UPER+DYFKYccCmchHaArDoKb8xVTweL\nzx4Lftnk6f6bNTMhnlOgpmoQxaQq6ojvME7+LaPK3r/bvJIiV7TlFxZ/uC1x\nrK9+\r\n=pDcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdPn4QkoaZMhRSU+043aO2QyzLZJGVfHGn2OdC39c3fAIgVkeG/sEwfxyKF7olHItkx3/eflDnlmb2bE4iBbb4iMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.d71b65aa.0_1587508674232_0.472938262258517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","@material/mwc-tab-indicator":"0.15.0-canary.58d51135.0","@material/tab":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OWgc8xSrIv1qBXuwJd/ZiQ3aCpHsY8hXMkd8zopZEf36WW09Jc5Ljy6el6RTy6NMdzxvjPEjh7ERDFygPQ3tRw==","shasum":"8cf7940c41bcc7f005704c40f86e58dea48b38c1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOURCRA9TVsSAnZWagAAyMMP/RfSc7UEtHl4oLth0FGG\nU5WVqUII1Q7oga2pYqQwj9NC1d7MF7Z0wiH0CRLOtvtcKEju9ynetXL/k/eW\n5bKLYymhM1w3S/EkvGuk6lvx78hxEz97BLdR1K1ill4VViwL/+i3X8jj4DNj\nD/cZessvRoGaGgFasIu5S6i/RkOeNVl4Kni933aEJV03QzQ78bi1DpnWTW7/\nQf+ZIgF4YGdDRhzYRV/dm0Bhkfc3BIrytDxu8BGZPNnOc9CLuumjdzRSU3L4\n4o7/YbagSPzTLbJcoZtQDR+sKRq9RkN82f/E2xlFjN8ivrfEQMfglfljSPSF\nekXhyTS+kB01nzcvUulffxJxzY+5HWznWT1AsWJfCxPw/GnDW+eI5S2A0srM\n6D05ClJPq1imaVHwxS1hqlumlkMItqRwKaoMpo0ZNTU6EbWQ0DqqGRE9td03\n6CvZeO54aV4qAqry84IxvIn8xfSyAXJ30ZDoJJPRJtSisx5wv8XJHJIGP/Ow\neN/MVH7TMFGW5PUrBIc1eTTu2REDCccPUE5qm/IQwmi2kgKYgP0Xh9MJaNLu\n4pXazjMjKmpSIgResQmS2NG7+r5vtHGPccJ/H3Sd7jzJHIRR7Q8HHfuE829C\nYva0BBgLt4xV9SJGIz2Gq31QrIt2MmkO/XiiOo2ESfxWhogEUi1C/M5rVXPC\nP5hl\r\n=c285\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDP5dQDp7TWqMzYiJ70fQM6uiXWQghP6RxOQdFztdW21AiASd93hQXRclW0UPkjr5OX4snVDH2bSn32a3FWnZLAEZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.58d51135.0_1587602704756_0.2761611222022602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","@material/mwc-tab-indicator":"0.15.0-canary.d0af8ba3.0","@material/tab":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D5/sKiLOwn2r2drNy0FPhSP/je/pm4RHL7KlQcckKAppEYYjowW8ppkCFnHS/CQHyL3zfuSlsuquNjGCEgowkw==","shasum":"211588e648e908768613e77df6e686087ff7ef19","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoDCRA9TVsSAnZWagAAu4YP/joEkDOcoeNkTdvSv8Is\n2VoStmkG8JC9nSUyW6UHfUU2wLtBcpZtrlJvsiNosH2tj39T9I/IU6f2gL5K\nMa3gbU1WlVIQbTMjSeOTE65W2dMxRxGcXZnN1IgFKO0IgFIZXfHzOF2iwFgO\nkn0YrwzUnpNNGf7wVFa9JJdERmVYicw0jsBB7MkrFTDcuE+F7KwlEdLcGxp4\ntGflC8pyAQQBdg4a8JuWvKFlGzOoyLQZbs9UV8xtntbT46SNcrCn0pFj+E3G\nqGNFyOtFebTLToTI1176/k/EFVpaND4C3UT0M0HGWXmB9z211WjdzqFKg6rr\n/mRiWB8tp4IqPIWPvkZQt0ARYEWifAgXXDKwovYPurwjO/pbD6SJJoeBoIld\nhiyqS57OWkVTX/ID5igUz/Rr1uzbk+DhEWFA3QZzlhWsNX+uP+Ol1jHC0y87\nmPtv+TrDGRee0gJwiu1oj0UtRk/rQsCOJ6e526fBO9xxZSK71cm4w4JGfakI\nyn+yoUyKaGXlcl5RS1kdi2KVNZTDuZqsfy5EHQmmISsiaca99cv5PcqbeNX3\ns0vthFWuji6pBgj1eXKfepGMufUoJHzbyCdEEMCEZVvfFCrAYF9fL2gPTqoI\n4hCflNXKGO/pLA36VKNTBhqf5bAyu9M+pyHAQh98mhiExyWurUg10orhLgAV\njSXx\r\n=OEuK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyAwbWQksIpgfyZ0DV5afvNhBGTCstMvp7kq+AJP9M/AiB75USRoPI02bD+3+maLhAOA3WOJH+SVkv/oebWJRqzTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.d0af8ba3.0_1587665410609_0.8587054206686744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","@material/mwc-tab-indicator":"0.15.0-canary.8872b17b.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-em3/4mDlqg1Q8rl7A9B+oxDVcyAd9I8VqJqWovaNtXqN1+eMn+zCy4tNbXI86Le+LQxDgMYfVEnnQ/Xo7vhuYQ==","shasum":"117d1dc1324f6a1d99b66d1aef47618b78363c49","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1qCRA9TVsSAnZWagAAth4QAIz36qWOvIzpDall+soW\n7WLUrtZFj7pdt57Y7bbrXG5WWnGKg5ZGH5Icby6dVayH1D9x+F+66WUFWdSR\ns9NItmEFISxCg80nazKtXL1rX1hO6Cw5nqPasXmGdW/09YQVbM7s8EuxjYO2\nBYbNXmxIlZUMJfeb9ultPUM67Ol/wsfcP2D/J4dBwlHWm1sZS6hzYYzj3o8W\nMMQbBnQfUasjFKn22CRN9euG0Q7ndnj6oKhX784jTeEwot5cCfg3P0wP4LoK\nfUNWhRGa/B38W09lJ/OffZs11v3hjo1e978DUXu9aIzW/VgxwlZTRXhiL8Os\nU8Ga4Sd7edWBrbMprmPV2gsS+DwX1md32e9sCizXDuj7NPcHM4/iQDv4HKol\nPv/rjj0CORyaFUniid3lOROIlUfyH+ewS7UsUlW0ip73iAky9nqjmUKZCzaY\nfdf8ePZvVQqQ9jVcfwcISEdawW5NTq3j2u0/D2k4Vd18/7BRj8knL6+O0na1\nZ0m/UAizp+L1uz4KvdwubMbxUWT2ZoCL3Ld7XiYvXOHCOvTqbr5Ch40UyBRd\n3fGAgESVyFWSN/cljRimYYumn4YwJDlhSsS/9mAwxgrT6TqmhstBCB8rZByT\ntO1wT1DmwwT4VELglvVJb425Ip3RfnUOWFq7L3Mtik7oLa7MWwTm2Vmnuyry\ncaK+\r\n=QqVg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAxnFX6eDAAARCP90GBjSMSnmlGniHfiQUMSWk1OiB/AiEAtMVlOZ5oPnlBIYvZhy7kUS6eFsH3qJkICcL68l6WxcU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.8872b17b.0_1587674473878_0.9986453859215731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","@material/mwc-tab-indicator":"0.15.0-canary.eca1a610.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W0LkAsc3XcS1s76M/Us4bOIzzTv3/7jN9s8vzNW1wfQ8SWxV6mnwSnYETE35Rkoc8eT5HxY59TPNGlbEirYRDw==","shasum":"ef0885b17fe72dc365fcb157af5013fdeeaa3c4c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvyCRA9TVsSAnZWagAAjc0QAJxIvCsmH1+lD/Y2dpxz\nzmImMUNcxXLRMvZIHMw0nWowy/yQ2W4p4gP/7+38Dim+U5dGGuTpZFHK3eO7\nsra1x2EsE4JruiAwKrxqgC0ET5hGjW4de1bwLAVETtu0WNxuOWyiHZIdb3y5\nTsgs+Tf414Qh2Tz9kb2YOp+qvRDEAW78QUoAeKMdWiRz8/6hC86lQjVmJXvK\nkSgwEQYrnDvKJgJnhJ+8PpkDt/KDOaS/P3VH2O0T1u4IaGA9Y3FE8H1yld5s\n/GKFpLQvLb2nJrVraCy/4/gLRNoAn1tU9ZBFxhF5FS8hvwMiT7PAA0/qtlDo\nZ7Z/yGEyty6Zkyl4CmEyrkxt9MXe/PYqEghkZCh1abvmgN65qm2QwJBKyMnY\n/NI0pX+yEH97M3y0D0oRH327KFhPits8nnf6U8SxAkxtsjIeglSETRnByp1q\nfqW6PQEUbNakhdQdGsYTQwEYV4tgnt65+XfAULxuq3riTxvJxgoh8RKnhQi/\nOA6mtjIGG6Vnm7300ntXdF9rLhGIrnJgra7wYY04aLjulchJe7DuPX97U3wP\nmX/W/PWqrmqyCLppcfTz9YBBGJwer/zAwpieU1qn2ScdueXi+JkevQH4Ch3r\na3B0Zcyy9Dwfcv4ejEMzQ+2pEI4OXCbzDUo77H049Hu3iEKOREsF/De6p3Nh\nzaT9\r\n=GDfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0vsBjJKC+RYjDyKoNynDR5AoEi6p0O3Eo/YFt+0GSzwIgIRU9RFjX3E/2fER53xvCCHk4+CqZeAXoA1yEw8DNbjI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.eca1a610.0_1587678193726_0.8844527898999925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","@material/mwc-tab-indicator":"0.15.0-canary.baaf529e.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6ECA8gl9cOrtH6g4h1pzyCKG6VNUXl+TwHxLEhZ/0ZgSxzlLzAp+t0lKCuFRYsrXznXE0kQStl37CHKAT+d5iA==","shasum":"918c76e142bbe7185465ed1c74483816cd919bb8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpOCRA9TVsSAnZWagAATXEP/RiXUe6XrptmFbEpC0N6\n7dRoJ4axnC2uBf6JxQdh71H1d4FuRoRAH8Yt0+6yFgAAq1ziMxvvCG0dXbof\nBhywv31cY9ti/r4F0bT9gpzbmMLWT9qU+jr9WYze/xE5YHCkgJnlZk/xT4jF\nFS1ThPPZsv2yBO/zq9SRf069CWwcO4AGHRRYkXPrubYoG3xd728GpbXb0AJn\nl+W56PncovzlnHx2J+a6+PsbSZ5n6j9Y1/7C+A6PgMAQ2i+z+gYf091RTB6v\nS9yZchJrF2Uqw07Et/zcxkiP582X64/euV/t6AuSwrjK//m4v6dXeFCGF5wR\nDDFSBAW4poQA5tQ6dEriDjv3P/1ejXKXq/UqBp5AZ01NSPW+2TOte5RBcsda\nZlS7Ud+0IrX71Wf+g7rxoa+Kya7kqcabBh6PdhquuSkyJOW2RvPS2uv1+ugW\nCfauJS022/LLjte626Y3WRqkcjdeUxKt8gUje2SD3JA0iThoDKrRz8Y6NpDm\nS5pkUaVQrhpHYJJSF2jov44YeEMKXCJbBTLX2cZp6oPpUCmKmHqnQdTSIoKY\n4FsBcrt2Gz15WJt73k4WBQPoN89yqqXAcWjG3Xs5S+cEfSg7gYaWB67KC7z6\nmQqqop7YIQyxdZkQxKwKQarA8xRtViP9uvIZA1Gt9Ww5RUxlDrk/EE/3XvOQ\nCnfi\r\n=q7go\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWfy6J5KZd/J8bDixFi16ONAhpoyoeaXEN1o0kMekb6AiAjy4CtCZ7WUzexaxhamUXHkh47zyVnqB31HrflQl6lkw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.baaf529e.0_1587681870062_0.6682578893163869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","@material/mwc-tab-indicator":"0.15.0-canary.7a7992a8.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CzeMeS7EUXCeP1516ypHtxUAVdVDOz1f206Wg/NwPLMq5Ms3WYibN2L2hV8jl71JgGb+wf7E5ONyHNmC3asgfw==","shasum":"79f3e408a0461021e43a0b412a76ade9378fd492","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFYCRA9TVsSAnZWagAAVcsP/1P01XePsVvuoDcCUxrs\ndkqiU2wQOjqEI+S3r8J9+gufMipzsP6286Ow09lF0zeK42Co5e3D0LR59eoG\nqhQFy0SUKq5sUx9DFeknHQIswvPqkalWMBhao7jlP2wjv8JEwoDLUxiLesbH\nqs7rL3oriMw4IYkC2keIAEejEyn9faXp5mA9KLat3+LxzUm/iN0nlTEWVedZ\nntdDyFK4P3t2sBb5OXQVduW3PMDXgj/Go3DuJLLb3bIlGqmqYiWORnyHpIOt\nvGgZRPMh0/Ic+l7rCnZiJ7+Bcjoi6MafZojSAp/nmBbTVTynTN9pgqklKghe\nNa+bWxP3A20VoFySuIQLpZn9CM4AaEG3tlX4vTytC0Xt/nZOZ9UFVTcRRs4R\n8drXAINs6y3wCTkhvmeaXTwNfT0Zw5uS87w+19OVYl1aILdINhk6jlIN/0Qq\n1kz416pFWpIJxIf5I7/msUX6sNOBscYgpt7pl8Kl3LYeAaJ69v6DjkwZr3kw\nLx1uiArZY9gh9L9guYhTp5JyZZ2dXmPUMltO/xIUtSr0dLyoUg0oCz58kwQW\nCAB4sIxoxxYMLt6hyxpDv21yW16Jhb8VfbQGdVqlYQvoGhkJfursfQWCUZcM\nKYAcTAHx85pH0r2En85QFnTMgDr75iMDeyk2+SVptl41HUsl+0AJvK04nnzZ\n65bT\r\n=gvf9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqdmrAnTm+bN37UucTV9DSvpYFqm2VIC0ZJOE/EHXegAiEA5diVFjFePcu2XnFiUfe1EAauIXApSHEP0ibGeNYEqdc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.7a7992a8.0_1587683671913_0.6905280029461718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","@material/mwc-tab-indicator":"0.15.0-canary.1150d64d.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wivyoYCB1AY+97bYzM8VMp4rmh8sNanWOwyf8xkqwoHTeZyp0eTzmXvntx60WpaAldYwbREQzwHK2He/FXdLOA==","shasum":"c5850b2cb5f09f9cb49d81547e1a3bdab0b2e714","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBrCRA9TVsSAnZWagAA220QAIXfkWgvyFaNzvfG8ce8\nFbbPKJggz8CZYOgamPJmKr5yyQfBdz8meD6a82Cwp7fBHo6fzmmMhLgG8dXx\ncKDsR5eNDr/EMc6/6wTYpYEb4EOiwltuaUsHArLedUEUuNAm/7pXFXxSsiQp\nDExehQ/JHMKGcHIrD7QOpNyozxGTwupypdClC/upzEF1fOLBguSbSTFFH4J0\nypMNBQSlqbEYTsxFN2Q3UeHfmBwUrZcnRrGA1DDIyzpjf3Qph3o0A1FxH67W\nbMx/FR43ynCvhtGvbqTnsw5yf7tjKctD0RalmDIAsEnqRdFRMVpobj2PemMx\nRyms40eNULSiGq9hlOetaEgb96ASSAnuyNVel8z1ZlD3vj7hnnw3sGCwNTjZ\nOjQgxkgV4ayR32dwYSVqvSErv+7JBT9XIUoGJEKqMX8oJfxlCn94JAqicEA5\n/34SgJoBEq0sz1/BRoAQuUS8O6q0GJFXjoOcw+eIQWUrO1Ii2J+z08igXTeK\nu1XcWqgQQbOijPW+HRjQNbwi2f22iHTt83KfjDSKD4WoLcqJvg2COIjt20B9\nAsA/0rnk+bsxm5tOIUBItvOpMhlOxNvtt2bwCzgV+Vz2J7GeILFypwX1sjYX\niYhcGX4nOjbfOs4anoXJuiq9o/9v/mfvwMBCxZL+FIl0gKj0MGiSNjVd8Dfz\nm5C1\r\n=9icH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDOS041PvjnB/mZnMmIMkp3Yk4uFP1TGXQrEoJR5maRAiEAr4AeG4bimgZaw8zDj0Q9WYx4Ouvpz7EyZC/DU5sBBB8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.1150d64d.0_1587687531226_0.425049331867708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","@material/mwc-tab-indicator":"0.15.0-canary.dad3f828.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+t4Ie9H2k6YpXE2B0FXjf6uo0RwPsungAAwqo8XpHqo0GODJ43QB6DjTT+6SPw7I76DElbsM+9W2JwmuTrzqOA==","shasum":"3a8f31b146834eed9076eec4a82c93352ae471af","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eSCRA9TVsSAnZWagAAbv4P/1rcKD2wBhYiCPfOVrHn\ncUO+JsYIX4/5gGLk7msiKeaWZ/+s3499OPbWjY7fEau5YISP56fS3W4H3NC7\nXduVelkyH6f/1q6II8eczHIQnx7f5Mc0zKACF9FWz9ZtOUKOhNsfMgGVoA0y\nx0qLgTe31JhKlmuba5C1idbg4f0/AOBLn98LTilTlfG0g3PLa5+NchMd5OTL\n+DieYKFi/XprMYZNUXcPIf/ntWIZorXwuRP8wuFWr0sIvtnoS3cNVXPviZ2d\nAar0smGNLdbcXHendQeSE2RC1k/hOIfk/uYNf39dmla1Bz3RRejZmMVFHp9T\nvbnGl/2++6YQjp9yrt47ao8i3kuCNiaPUk28IU9jNph0sefKjANAMR4XvZ0J\neKK6UAslfS+mL6PCGdnTmUQE8HxhuXBR2X0pEMf5P6wcv7i9rKUAf2f2VSRl\nLvPXkM4ad6JTyEjUw21J+JqLDqtHKlQDqKYmA09S6BfTJb0f1wUR5x0F8wHA\nNEC69KHkgBH0l+1g10yoYEPKaMHIzTc5V7LTjUR8JIEp/5bHIJFyXZz0saI+\nzf4eq0FAryr12JFoMB1T6LD3/JICc5ZFDf9/iIYBEBSwD46MAxH/HUuCcYOD\ngdeZQ7okw6dTDreM+JYCD12fUlNSl60Ks+TpizSN6Jz7DXFr16KbBdvCb/Ud\nBplO\r\n=78qx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdUYwffJBMQh5QjQL50qXYvNTlWVidN3qFn+eXi8BqRAiBQeiAZa3xulHnldWBg+qy+N+kXe6eK16vH/nH1jOtVCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.dad3f828.0_1587775378069_0.1510891543260484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","@material/mwc-tab-indicator":"0.15.0-canary.1bcdb47e.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EuteGZdCpQKQfxHvw2GftuAUzfg4EHLU3ErToFQAeCdgxIYxAsfk8kFwiK3kseTFswpk9OdHJRZ0VdEGC1YNMQ==","shasum":"9f5fdf5a76d648333faeb72a8955531ca141314b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MYCRA9TVsSAnZWagAAnE8P/Al8OxWD2cek+GsLt23q\n97f+8GmSSPHDIlhs0BIpRahdj8d4Yk+1IIJMIxfU66kKQ5hkUNAyNACiQKKX\nPtw9OvUFIRX3YNlsmn8Hwd2FsHb9O0ylF6vDe+L/f+fab25E6tZv3TrqFQOs\najuamrDgYzDlxLnDyatmIHIAu9GUJ2YErqL15mIdC5wN2Pvqv3dGsz6TMUP2\n+Af83EYRodiqCFziQNlyeRED8AYma8ZOBO9fdZMqMsFtZUzawFu2h8P28vAe\n4+4mm40i9HjkE72dvQwRGgLB5y6xGPHIhPS1m1HJ+cIIMKha0dwP0R8KfSMU\nTShNGewcSWkIIF1121Mj54ZwnKxGhoVO4+lZ4KYz1Dxp3mRFQeaNUsnqCT/L\nKK1iHDHXVgVW7eWv6iXMT1EVZgxJSmi7l8mhZeU/uF8qiG24cL/RmTEpkD+Z\nkhY31qbeBj3zUvAUDCYWy2fMhKe0PsG8wVzTo9iNtMmM/w0A6gL+ZgOQGw1d\nRj2FErkVDUX9C8D+NZBQfcjk6UrnrlvmGukIWN7XF1UcekzCheDMDRi7coN4\nnnlcCkxtLMiVKWdJmTU08ypVHAAizQRdMHil1NCTnX6S7frKk3FPhrm9lhvm\nGXm/y3Jb+N9E5HV6wjG5Q4NAuGcY0hl6TaGGNp0q4FtFEkJQorvdP3K5Mpyk\naHt9\r\n=4DFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeArY2dGcdGmXWJHJLoAO5iAM8xYwXoAJZD8IkJ2Zy1QIgVX2AgiftzJG91soqMKeU9t8d83JqlvbRq/fgn8KfoTc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.1bcdb47e.0_1588036375963_0.5526456999813876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","@material/mwc-tab-indicator":"0.15.0-canary.86ff1b9f.0","@material/tab":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nC74C3Xu6BWcYxrdSXbnHIe+fmd0iSFCnsWpeIaWNewIi3u+PjRzXP88+z3ZqZzprBBsCn9v9pBJu1xOkM5flA==","shasum":"58ed78f5143620c58b32afa176209296e6895732","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5s9CRA9TVsSAnZWagAA20YP/3wAGfI5nmZluOmZTfcL\n+Wn/nfeXKYT9D2NOaFYE1i+QA8wSdDyqtOmUuFhMmhGA6XsxQJ/3WyPHeXCf\ntUPud7IRXN8S4yE9ecC0Dck4xtQXTW3imIDYhBRxV86xvRE2eH0vHzuDCiiN\nbAYR838rwOKBVkHXzn57fFVuVou0AOFhNgHEFnUNqJXIaqN9htul9IQ15fiY\ngvJDCIagXkL4ZfgIrfejTzHkDq8Ds826zMlsv1qvZWOugNwv9M83B8h3MYlP\nIiDldBpOL9skCMxVjydm4P16H/Nccl4SmHJ0FddCPc8RnEao9SlSU4X/0UG+\nYs1R27M56Z766PrQRcJQj5aZUdLF4ShkE3tUpFPfRcAT+vh6U3dwL65oIY6w\neJe0lh06SekRTzM8wLf0oi30d4zcFtwBVI2mkXuNg43yE0OQ6I/eENACXv8F\nQJamhkd9azIXN8lgSbhyIxeIx0BpsIUdice2B7GJZjKJV+bvMZk6Pp4LYiSK\ndONMaJpCEyAnzqv1QOOIRFVWTEW7LqNsaHOc096udZvpTgWoMK8glRb6VXQO\nhOvJgy0w9H7HuCg/B+8eWs/T8QDCkib+zm2XSh44ZX/gS4GwHWLNfXC1GGKX\n2rD0rKJqvc4bLdlMYUg99dWK1NoAFii+2A5kLf+6KZPbMacPwB7UkvpeYrNi\nsBr1\r\n=2I0y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsyyaJqbN7eZvIgfwx4IeqhuKgrCMi7UZY2wcGE6Om7AiBhXBK5oJCiKJn/E1Z/YlZbewNSJ0T7Qm16VkS50IZfyA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.86ff1b9f.0_1588042557344_0.22257720564835104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","@material/mwc-tab-indicator":"0.15.0-canary.54a86b20.0","@material/tab":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dHpoafwBU6te3IecaVNzrNZge2tvSO+EOIZ7+MSODSGafdxh3LKhvwxPlk+UjzquMIMCL6c5fRFWQaL4D+orlA==","shasum":"1f146d0035f7659745a0a154daaa6cf99e6b3f33","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6B2CRA9TVsSAnZWagAAnDQP/RP8zzYFjpbsn9Z8J4q/\nQKTNdblierb9EF9fLmGGBipbzQ4lAXxRwxesfu8FxglrnJ0k1rAXiMRmB9t6\nfGU+BZOtZ8YR7Si9DgJdpSTCkCVi2s1Fp23kmLdx9s8WJN0g1lxxPBiUxcEN\nHvFtw7FmREZmR/UU0RqB4qh7+p9dpNiPNEGCrvs+p4f+GQYwRY8E5ZiAZgMk\nddmuw4ShWMDUZewjDMzRunvRwoj+4Z9Z7eUpERhoxcMw+zbKf3GbyBai99Fx\nwzacZzoqEVaqZwA+eKbJTQgkJDk41UpeZ2R1J1qlDX++BZbgUFmpUdysphgA\nn6DPRNQyIzwHbr2LUMD+SgB07Xn5zwc1YEbSxX0E4uZnrIdydGhUbqR7vD5V\ndPduGjQQ64OqVk+Piz4E7qQ1SkdF8SEtyW+Xt6VEafrRgh2mtA6ylCrjUS9O\n0LSiVnUhd53hW9Sigf9rZlUOn6DLdqONo2hk9iD4uQqqqVZGqgxi2mZhppXv\njsRQw+mh5J2KikW2AQT+q/4FWgkAEf3RZs3YRMT91mbmHg7TKOWf/99qJ0SF\nynba2fjpF9and1tt7CmVe+qfauWgpxfOEbUpP/epjqcbdLDb3kLh0hKhUDRS\nd/zQ9KC+CtB+7HvpiUjJzvaa1UmUj8TbH8YCkW49worPMcCfo2lBZEH8UN0g\nrAL5\r\n=K4r/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvM56mA4A2qgB3ugHpQ7NhzrteM4hzK9+dDKt+DcZC2wIhAOiKiYTa+R7RSpNXRkos+ph7NXiQ1xTDINXbHkd2IQDy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.54a86b20.0_1588043893721_0.15623693982360254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","@material/mwc-tab-indicator":"0.15.0-canary.938fd24b.0","@material/tab":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-h5VRzBmcIvKOkOaHKAEXIKNayHblixBkntypCbjm6DfPxAclU0bAHOBU61qWULJ6j3fzGcJ22D67Rx3sinqRaQ==","shasum":"e793d5a275b9d3d309ae0af5f660dd47c90041d9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqil9CRA9TVsSAnZWagAARKUQAJfgNh4j0gY2kXYxP/Ry\n0vLNp2YnsmoocIdNyU/RzcmoohSrTzHAvzFv0TLacnLzZ6RbvCMqfKnFpf/9\nGt0EZHIUeVLRxzABFvpg281EC202BZ7YIRWJYU3+WZ7o5vHRis0EpHDYj1OL\nVkzFSd761DwltY3wlwVkwoxiXDuBSlyRTNJGzFjjSC9QNif+ftR3HwV/VRjd\n5LN2BfWLNGDvOaXoElbZ6uWliT35DYsgWWjy28KnC4qe8tfXIFJYzqnK24bC\nkoSje/apL/Z7M5aGL9ikQdR6PG02rnuelPshJPqu6eRQPFqRl3XIYAQIuWr6\nn9FQhXcmtvJRSCNg/K1l8hX8/Qc1pD/7d7TadegiKaQYBsPALsFPmpUwBjd8\nmThWTYnPdN43sKBI01DFTGxw9fXRLP5Poii9Q4m2ahRK8pCSOCRkmstoHlhO\nF7KrTMT2iOA1DM/JcMW4zcVLCw7KM79O1JO/bDJRCe5Q28uTsCf5dkuKvD90\nUedVv4tE4QPTY+jVbKbnyZG26moh/RhUq3UTaeWllFTdlGTjQC/aBs6mCz19\nQtDYaETvdbN6qEn5YgCuOb+VxTIWOGxbBw3QeDrF5ocMYJwx+WWttAgUykxn\n6nBGm1qsSB5uUZAT5DUnnaWYw4yj8pcMysBi9kkbnyuCr2uM3AtxK5F2E+ik\n4iUs\r\n=lpH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtiab2w2IZ8T9F3at75RurriTBIS97d4+mxGyzrkKnuAiAGXEf8uxBA9h/qG/pRpAk4G/F5eayoteCZEES/q8cjlQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.938fd24b.0_1588210045559_0.19714935797347133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","@material/mwc-tab-indicator":"0.15.0-canary.39e9a008.0","@material/tab":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yfaj0uFeJuEkzgp/9YLkpJmBPZgIfZp0CJRE8luURoe/TuSkJEv4pk5Ki30PaLk4dS5kovyo/Ys3ANnXg5U6ug==","shasum":"e00fb13181ef94c5aad46f13f41418eb13a4fa09","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRVCRA9TVsSAnZWagAAxbAP+wetw2e/iqITt1Dk3Ll/\nfQGu24apyHS9Ggaz1AlnglP28ZzcUbPv8VuIxen4QiBn02zK05Vu3dBYdP0I\nML47WgD/wljQ6d2/bAWosgqQUYtz1pmW060MHFY2Qs0MhYOW2/qcxkJij3tj\nahHgX4h8ZPd0ZKLO/OahGdXV3tTPkUZCNQ0c7WcfTfEIgELVvUqASo8wXkQ7\nD7NFE/inxQoOLyVIVKzBDqjcWXL9SiPSGA9EHKzwZPnMFrTkIgtvTdRHsgTE\njzgz5XSCox9xmtqMwg+8ZL63EH627DTkdReyDv49k8+Ox8HuIb4StOwS5Q2A\n+OXwW9uvZUVpjfdZxD6h0h7oxpZll5IcRraHk1Zpe73X/v2iIjpfPeBTLyGn\nfZ9DxJ0OuJTJOk2GAmv/8G9vpoSUJEYa+dGFka7YLOb0WeqOYRZC3e7tW1LW\nEr7sjmUq3P4mwWCDgMvHEttCwpNSRdWhSAm8C84I4Ij54wToDMEbd3zRV7Xp\nyfPhElX5YZSct1NL9WPjckLpggUcrcP2Z2F4tsNTMc8cs8u4MjMupwhywl4Z\nbYhrZ3k6YqiRaXZ7DZ1jmlYOk9UJ2tRmLKqEi3GcLsqiFMpHnGvOE2spw9B6\naKvKZedlbgEhY/LCeIXG8U10oeaxvEH8f5LnNCmp3SBt9KJn95YbZFAJhN1u\n1Gje\r\n=rnWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7zNqqsWFUjMJs9Ru6UYns87F45MJlfFfm8A7Tf7d24AIgT7vLBo7zNXjLoKgT9S13vJ3+LcJjI0xNPrp3WJF2EFk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.39e9a008.0_1588212821494_0.7408360905540199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","@material/mwc-tab-indicator":"0.15.0-canary.f3b365de.0","@material/tab":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T7Yxml5heFfFAPErud02XqPjpBG4VWyzbEae4BAKn2TzIfJ/qCQqKG6+0RhpPz7ZwlfgHRvXhh9sEgSOxDbrVg==","shasum":"859f469022b403d1fe4dfed076b1492ac0cacb9b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqov4CRA9TVsSAnZWagAAxtgP/3b7t7VL2wq0sJWqRGUU\nKKkOk6Nlcb1JOIJh3h2H2BkAhU7FMj/OAtGSwT3c8I7rLTlI+lesFBq5iU55\nw3fiPLJT1ggF/a06ilLJuXSP33y53xX14Sou54e/YA8NehrJNTN02TyhPmFI\nU/1YyqwBf5ijZfM0Ocg5izNgjeFferqD8V6UoiGSZv1G5xDGx3/p9SMtTKHv\niPCvUhIKm1LTZVvAx2tlUpaHiorRVOF6hRGyZX6ZQxH2/Drz+d8gQ26ykrZ2\nCEUn2KST/PDm66AgxPs8UCVW89Y3sdntMfp28mxQcbQ5sO3/C+xW+4f0X7UM\nkKFGUQ5Fye61vfXN3ZprMM/TLlIxvYcLUDjgf0iJlj2HJLQH64F4thC0woNX\nwgPCCFLAlCFhkXFAT8O6MA1dlw2711HCKSokLymsFjA/ejMebaX6FIa/DU8N\ng19E5ISSDpxscBBq5fPX4nO9P+kZtz+2kb0BkT/flUJ+D5c3Y3Ds6ChPQInN\ng7QuGDo7wcRiz2ntXAkuMjZ36D9+I1HMeHVzRrqBQwUB+rAuD0GkAWOv5O1r\nPILD7qLizwMVfxQIW1a9bbWlsqO5hSQBdBP+nQ6GOqixwfFoRTjJSDZhBEJU\nsZRCl3Kp8bo7sinMETeHc0WsKuixjtF8ug2CgGnN3zrZnSp5h4k++t2qWBG+\n9zUN\r\n=kVOa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICx2YNxJs+LZuWp6nOnxCOWEGOc4ir5GjUu7rxRGUweiAiAuTV5hmhtTqd37XH7+BS0tkQ44byUgImBPpDh7/2fQ7w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.f3b365de.0_1588235255564_0.7094158576558756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","@material/mwc-tab-indicator":"0.15.0-canary.cdbdf807.0","@material/tab":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cdG/PtgJj0eh6MRL4mruJ3Wm0+wMcouAVuw8jfzab6kq1LpPrENP9iSPhIJR25Br4Q/nGDRoCgY6OJ/gadRCVg==","shasum":"8db779f64e3a10fa387d5b5dd2e39048bb0fb218","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oECRA9TVsSAnZWagAAHlQP/j1B8Q7xjK+0cRvQANQC\nsE0370dYKXdjoe9dSNssqIx1x0KMFrlPOShhwEM6E/W2Li3CQIwpykuAaIZa\nXJNhZkCGgpyKls/PDWRCLT9WkJ8Xxx2FnRuyI+U2ZY/Ct21jAwRWEqwPjcVK\nhoavbUD1U/pRKBWncCIxLZ9fX3fr5HOPi9HQq8ujW9NX5UmOH5+Pd6m1b6hJ\nlSYDkaUHR6JF1ZEzFMcNKzuZC9ygAJXf+0KlaSyc2zmLAzfwVjQqcGW2YRyL\nnVEi+Mm0+Cco7omeSmD19T6seJs7oYJQs9FFUCQr2/hWuvnmd4sUIAWgpwzg\n4ey6jIy1+cmmqz4GdAelufaQWxbd0MNTtKxgeOA7iSq/kUTAqrbqdE5eGugD\ntiSerfFjrFsF1oF59HHkPRmp+veiBWLShfloDuxGMFyHFs9sO740EcOQNxTF\nZh7XwIqjR0/Fw//aDK5yjBADGBE0UFja/KO9lRpI6QFgV5dMntR6YOUuOol7\nKR1W78KuihCgPzSs8x6JYd/SVWD3xCcFgmz0VQaqvxxEaI1vEZrhzxFXyvy9\nzNuPFFfLmrlHxfKUATE+10zJdz3g1lbTqAeWB7ax/NP9b8UbzBOoXJ+2wfsK\nb8OS2RcLNFvLtVIG8ZBxuBWLvKRbcTHqqy+mDrQhDxVU9iBg0TteKoWLXuNv\nsNnK\r\n=+b7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK/OrgpJJVxOl7qb9E/mqHDFh6adaSuaK9wscQSLPEFwIhALctmCSpHRLs+OtHCVggotvmHD/p1BRYpUu0zrnR5ZkM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.cdbdf807.0_1588292100212_0.2421990242386809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","@material/mwc-tab-indicator":"0.15.0-canary.9995ae17.0","@material/tab":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2t3taAd2KCs8IXgfk5QoPkjmjX7E6+SfO8JuuYzehb9XTXIwrAKQrK0iugO4aYW1i0fXmx5UPji2Isxa/a3Mpg==","shasum":"2f07b71b88630f13026e2f22696e6e6f23452dad","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4+CRA9TVsSAnZWagAAWMEP/jerC1r2Nh8XH4JGMp5G\nVTlto1h4xs61oKaXgnjBfWDKc4uhRfK968VM/UPFuF0jpRCsJb+MAFzvK5d+\nmCwSq7xd23tMqznT2QgeQRa4ZIrhXhn1MkF4I3oV9DpOG6Ifpk5WUi3y9lTb\nu+bIv/KlnELOCF2GmU7ZqJywHoZ3xtk/++5P5Uo4gTXTHFIHRENX27Qok5CE\n4wRC/554/OTExt79YgiaoPA4p/oQxVnLKAFc1/z3dV028lS+kC/aMEUYfcbG\nC9vmjSJ/nmWzh4PMU5jf8HTv8yIIVzWqF1wO+c/FwPzCVkKvQM8p/FdvjT3/\nZG7zsm+Y8ilsbdoy1Uw3T5omWyts6c/w1ARzFcnFai8vCv/BcRdJdLx4fyI4\n2YFLG73+JsHbcy0zXGj6t4hCcoIH1zrVt0kK+WhG0kcSW9pMjdf7+IACGH37\nbXYOlp8ReQpD/Kho93Nlt0+1UjhoolN4iJ8Opr06ecpPFOflWAiIDnfXzBSS\nrQsCfgW5SWsElJua9IwhbSBAddhxpggyv+hv2QZc7UJrabRnRRt2n/rU/cIR\nB/HihO1vLGwsyiEcSq11YfA7U00nzuwsoqTBVeTFvcnEPLFl3gZESZL2Wdxh\nLTPGiCiVIa316317q+OaHG5ocwR5AMi0AWtieNqxPhte3Qlu8X8PGg7GiZJ8\nVWn/\r\n=UwwF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcE8qHjNBPKAzhsAPOKQeoHM2uYM8c2esW4kVJzLp/cAiARTvF/CHlsRQZwpvkVVOQl2a7J7grNyeJ7Z7o2bL9oTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.9995ae17.0_1588358717875_0.7736258882646618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","@material/mwc-tab-indicator":"0.15.0-canary.457bf035.0","@material/tab":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0VULkWF4FQT/erNHSX2nXzqZioGz14LiGdkQokWkW0fyANHJmCUBFxtGLdU/MsaHi+V/r6CE07TkKsaS52nvrQ==","shasum":"0f49220efed5691a6b3567914b8734c2f7efab49","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIu3CRA9TVsSAnZWagAA738QAINVAwydPbjFU+2JMMwD\nveu9UMmbUxXqBfx8Trv7ii3e5uaUIIJhl5+EKbraVm1+Rba83xvFzht1UXK5\nft/nCsRUVm+JVpgqRRO6FqYcC8NjTsQgMnC3gfzWftLNPITT8p0FMRvBAsNs\nOPznFW3fqJ3lPXj2scIw8uEIXIa2ms50sz/yzcHRYJVqNH35elrKgd6BxhF0\n1ambgZaz5t8eQsDT3AdQxsrLf2COPBqTRgaPtHHWX7Rj1xzrXw8STB1bWrbH\niQZ0SgPl/h4TJMj3rcsjVtAA19IGqq4hYYUYdbs336c0XefUpdbajyrNLEXG\nTJrdUU5EGCIysuY304Tp26AX8NjPlZJsiKle6qVTfiQXxQivlEXJEg+muiLV\njSRTVY+xFFQ9tam8JvJi2G9nSRLa798SpwJYM0K7lpuQElHukfpzqDxgycTB\nMJtPFdSgEgd944o0ZktVDZgeNnBRsExqb5oMGw3LazXmDVA0Aajp8GXLkvoZ\ndnJq8SyB/++m0bjkmEtjWP5jLptODJnwhhHjdGOiE9C5ZXcjAHf4U3yJYekp\nIq3V14TGJwuAE4MdlmT2VBL9Gwy/H/1xk5fdkPM1Omd2FQZAf5RSeEx6yN0H\nPPgD/J6RuMBQJDz292omjEcbpXrwo8oQeeY5yIQqhgusGGsHgfa9j6+/YVDA\nf2n7\r\n=QVmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT3+jd6Y36FfXM7XUiOttm7wCDA/3FC3PCrTkjsQNbRAIgPzbl6EZ8g02k6XvYyRrl+ogiJElCXk7CG0FUxoJtyoc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.457bf035.0_1588366262463_0.28641864392619176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","@material/mwc-tab-indicator":"0.15.0-canary.2381fd02.0","@material/tab":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rO9vz2IGRRgq9D8mo1x5Q3IFprLHZUigqDG4lTyOPaxgoPJbBErin5J68nlgJxx3lhifslJ1Oq45GSdKOpL37A==","shasum":"a2abed0a01ce3336e538f46689a2500bbf28d2db","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPcCRA9TVsSAnZWagAA8H0P+gLCfTPDFemcr5fhkT4/\nRIDGKS0SMprDClmcq74Hv0ObszHti1cKqHEmHMMIOXIXMi5xpsSxnSLYcFS3\nerpvXk1gLnBz2ROXn+qKlgj8EPnOI3Y01QGTgKS3/6ZardUJgqVd8PWqSVnX\nAknsrUUes+F1F/P03TqgXLmcYG3fq5Vh1RCruHNOVcCQclJyC0vtbOyAgPJp\nldVxzDRuM2GDTT3ARXxW2QXMet3pgy/govV8pMvsXnKYsRd1+uDr3rMXhIzz\nekaqn8QdTDq0EbfJmiRH5vjWpHD1kUhEYIHtwP8+b2nzns0XjKT7oT7lEVAr\nZfhdNtVp1WhGJmlidBqXnIcG2UJS7wjDwNL/hk+aTGfGM7/OraiGUtY8Zsk7\nUVYvdOv5UE9IhfNQaa1dFQfYCZx5J2YDcU1vj5Hy0FJqRJVtOt/0KziQ09Zj\niQ+dIAe5ixmgxNphpuPJ2XseSWxSGpO1gIYwD3nTvFkEtlAUHLRRNq3lTIoY\nQBiMq5TrRfhPbkBI2qqiDKJ3chqwDep4SJOjHFQ1MWIkcitAOt7AfXaE5Kup\nPSdsp5b3JB3wJeLcJBCGq/eKpTuMhI7dZ6aWfU5nSYDd5i6+TXu7MQkVwAtZ\noF1S7LgNGWg0ahOPG1JJdGchSDhqXLFdX+yGHIL3cCxnf5b6Wvmk65QwP0uD\ntkhV\r\n=jar5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcphsuXG12q4q8Txdo6cuh43hH7wUMFJRZdh4ZjtqvRwIgW0k+9bFEuaMO59D0cio7YHX3v13TsHBZQ1LhM3MQC30="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.2381fd02.0_1588368347899_0.5323674047630678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","@material/mwc-tab-indicator":"0.15.0-canary.b2ca9b57.0","@material/tab":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qAijC6t/6N1N1VHbAnVFQE0A9r9AsGfuIKiTnluM4PJPriJw6moybTeYRdN0tMhzrCYeSbr3aNVdAWFaqZIJBA==","shasum":"0193ef5d58b22dd86560086d36e9323da4a3fe5a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZYCRA9TVsSAnZWagAAUFcP/A5uG78CiyFjxDMiUIFh\nZ7wogvTWFmCMdeJYzw+0/Zfkr0YpmRm0f3cY+3oQCzfLJEvga5/MNvL67eeQ\nnj5Hzu8SgPwzLy5qyvY6A6kU9Fa9qr+9e1pJ4sS8TPgXhXHIThpPRbK0tVCk\n1jNsYTWUAFQhoHKc0KI0hTqJdekNy59+xBnx2eLjYzqq/gIqRsX1KPjHx86O\nzbtbcZHkFlBvN3d9SC0MeiZOPp1Y04BWGuO60vNzxt2xSxHM4R4cLjWAd9YM\nBpf17xlDkyzDQ0GgFmcjeFIGy/tR+nIvgRY9W4vX5VG4dkLaNMtZycrRDALE\neW097Xv8bqmoqOgng73F9exBYpJw4CZZigOmbY1cgVGmDnK6kIwhBySxuHol\njw8wNYGaMh2d5gHthEtygNhYnCBVubdtS3M2RTOE/bfQkWNBgUHEEknJZIu/\nMBU8cB+DxFsADDFtLEXMtR5SpR3pESXo863ZkDQVd8tpXookBj+9u2bZg2xs\ntepHqbgrsNmYBi607UxFWQnCoSGUCLRBgyUhRdOMYyxrnZB97y+GOufveCYY\ndU5WBAyE5h6PDlvH65X4ymo1FXeHdDCfDsEaxGuvJ890zHoPgPNnb15rJi/D\nOk7123enDRhe4Ey6URy9uD2ReQCFj/KlM3x8DJxZWdV83Q3LNJ4STRT9oM4o\nRD5I\r\n=KZx9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWc6eXkFyiPE0RN7HG8YxFjSI3xEC2Fx0NZSWyv4GCpwIgPd31V86DDV8Sgwszj3vbVjlNWyelRlzjbBVHtLmlZsI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.b2ca9b57.0_1588368984440_0.9409512800345825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","@material/mwc-tab-indicator":"0.15.0-canary.b2b088e7.0","@material/tab":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GwjCKTyMy5tl6CMDhyX9lO/058sq6UiDbmiZd3eHq5uJJlnwcyXzajTDUsffm31sm9Nj9CvI6MaxrK11dLl4/g==","shasum":"21d9e41c53901e4d0efd2e25ca292e7f94cfa834","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPRCRA9TVsSAnZWagAAqtsP+wfG94z4gGy28MCQ/+bK\nI4aJ3mFBJidP69gV7//K003b5MuYKV5NubQiq9ueV5mEbphg8wmjouPSFJB8\nyOZw8AUgkg+4gr/Vt6cg0H7R9qUKDQXmQdd1b+vyyw4jsWNC8JoV121ynTzu\n8qBU+tgCmlhIgvVCVALv60jxBEtTtmBVrolKekAjxBDeo2yZQTg20d35welT\nwjqAZOhIef/tVojcgEF+O2mUYFrYm7gW50MVf1b9oShiUA7hZSHrX9QawTB/\nbAQOaDg9d07bQVrkJSJJcALgFe1zWA/dAIzwKk584CPPqmkCWlUS82dVGySB\nwWacmRTBWfAjrKdnFaxCi6nlunBGqJGryMqRzzxsgUno7gMhOa9MsIKIjSLG\n/Db76SJuDWlXB0RLtIajsHBx+Jymg0N4un9uR6kwdkPEtoI+DIBUw/49n9zR\n+agxDKbk/zu543YLrKwhcx5qNKW2lehq8ks0NA625gYrcpvQUHOaMSUtFNiY\n7nQ+pBubFg9B5a3gpv19rJzEkuuIgsD6WiOWSsVrp0Y8Tp8eGMaPXxVt3Esu\n+MVul6Nz/wLIOVETrODtryvlEVGruL7uX4ad1bES3Ca1noOyY0rY9Uticv8x\nKeIYD6iqiavTir61yoA1nHJBbHmDaT3HtEvMe3ulymZaEEi24r7wGHUtB5IJ\nEfju\r\n=8nI3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6qGwwq4FQwbYLfFl5HgaiPcBij3WW1/2Ki97ZuMEFPAiAPihdsl8cN2IJrMK+kMZSxYmwbYbl8fmOHLIYtpEymCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.b2b088e7.0_1588372432617_0.9745246713674325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","@material/mwc-tab-indicator":"0.15.0-canary.fdd8f69e.0","@material/tab":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-P24jGjJRRNcCqaBUvaH/7y0LOQbzQQPidHec4kKi3LT9b9IHL/3p12oNA0jmHLFCxFsnltKBETqz+4lOCbhECg==","shasum":"0c84907f2a36a358ccebbc0f3f4f78e9e403941b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvtCRA9TVsSAnZWagAAiKAP/itU24LYU3Uk6BMdU5iN\n2LgNiMZSHeAytoz0bsb6bJj0baNd9DhXsDYAFFcXIbm3/6W0U7j5OypI+gPb\n3dF5LPBjxuoITDHUYx3EJx2TPpf2G5c2xK6n9ZETRE9RiW1bKvw8AE16T8cJ\nJv7Vnda9hR9oHjPlhz8Nhod8MwT2LRQdLif8SxHTTN5iaiyPw5/jM303sZs0\nHRxVba4cSmo8vywWzdeEq9hhf/u2a3CgdGy0LfoweNbt+jDN+/6Ndfa4AkJ4\nBVycDPLEaUvn95o6bfu/k7IAoCAsjcsvttEBEgDiW9P06Qf134QUM2DkU50I\n8Zx3XdOA+1BKOYbJMxFbXebpnlJCQHT7hXRLySeT5gkg3lxk01OwZZGZ4pQ9\nfeL9ihLC7S0/rZVWNk3NqAWp+IpzzwgT/hCuD6iWdBXcPKsJlGcd/YvXtV3a\nzk5bT1yxNWd886ydOvBgbt0YPgbyH+Yd/OnbwMNrFrxOPaRBF++gGFgSqr4y\n79rZgr3Ys2rYRz/Jde+yjZ8vcbRumxZx1hSf5pMvpcE0ZvrwJ48RwegbgSNU\nptz3OU71Qg7StyDHyHphMiOcMpfuHfHNPrIV6c+E1zoaS23OG8qsmI1g9R4O\nqaZBKZOPNydjyS6Vul8dnEADGkveSQdU4JDDiIBPgxzgF/VIzPgsVHzmfctx\nXzUq\r\n=ZGsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKBJoBiMNBlEk6BbEzajAcYpeOtwt4nnfERAclteM8OwIgAfU/p60gKiDELoAp03eQbUkpZQCI7aUErHDnCAbfw00="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.fdd8f69e.0_1588378604662_0.5049925966272764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","@material/mwc-tab-indicator":"0.15.0-canary.730f45a8.0","@material/tab":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ljkccJiqb9KhUeBF89XTJGG8nzH2YTE2lF9aHsFBP9kIgVA2AMI72kDOeHvyBKxrMCYLbAEMW6FLzW7O5gSkLQ==","shasum":"fcdb62a93d573d2e5f510c223885b70bdc2e26ad","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1UCRA9TVsSAnZWagAAum0P/iRp+IVuo4f06Eo743OK\nqeh5sd7pFHf5+0t58FxNJP3lNjmEAWQ+2EYv9NXBKQ0Wdnf0ZRGcJUyMyrEN\nYFDxDX33wqlVfe7XZJ7WlivBEGhdPrOmz8IBL/tzeEbsXCoJIqHFIGb4dhm/\nUuePj3mCmPa8evYQWC6lZcc3sa3gIYr9YYKEJNKHu3dThQ/y3wVT9EFMpCKq\nSnnQLO9f/0o69o2BvaqKZSHmlw0XJLamcah42vFtTVhvwFf4A6cURbh1J3i0\nJl6tiogE8+MvRB+7U1iX4oOu39QVsm/Llg+oy2huo7edZEbHoMf/2gpnzwQ4\nIOP9XHI+nfBYk+NMcJlKGjMdu8+s/4k2PHW/Bw4hjvV4Zi0nRs063VGXF+Ep\n1QQwvyoC2LyhHZEQ6964b+6oJRPf+fr03HaOhf02SwmlCSsaklOGtvnJGsUk\nZ2Iz0uLJaBnMqAGXkw1BM3YgsdVZiT4qjY3bXWw1zJHihWyNYkInCl4nB3b7\nIXs2Vz6k6QAKxUEALn2YuaYhk68LSgWqibmUOv62dq7Y5q5x5fwChWNx3pNO\nVZhlUJTqxHgQlRxAHgxlZ6iK2lLxhvwfA2+7AnNsZc5lJ5k32iTSBJD5bzJ2\nDxqNhP01hAreVvsifrznVD7JtdMBYacoOCdBpqGVDxEiSstDlpVzCWaRZsM9\nEUqT\r\n=aMp0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBFkyNDnODotsAFxLmjDVilM9w6KmdLIClgYQ/s9fzygIgREDyxCoUHfI7VNjdJRtEAxnE362DT6CKtQEufhfpC94="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.730f45a8.0_1588538707744_0.060144774535540124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","@material/mwc-tab-indicator":"0.15.0-canary.4219bd20.0","@material/tab":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RkCtD6LPpv+aQdOH7ZMzlqI6LE0/g1mZ78sytSnWTad6XgWJj9+Zj8JhcT4s7IvYF3ofqPA60HkbAjPaNVL8Rw==","shasum":"b8f6df594571a3e796936a5dd721979d255f59e8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYDCRA9TVsSAnZWagAAE4UP/3y0LRF7Sv9Qx/qwp+UN\nYPX3ch5wkPFZ/afNF79scG6Eq7vU0D4laWVBoLFkugI4NaC8PpmFUvbxPVeZ\ntOf+PE2WO4/whHt0DigQQ1efRxrEMHZMsMMu+jw7slzP+XqskEa/OFdwbTQp\nJbdwYAqwfmNvp9EiPG+DZyIyDj+if/Eb3HViHhl09rArWt2R1P+mEOPgWwI5\nfgM/dH1J1S7grPQyXyg9XS5IuyHH3hHnPxPhL0aQ9v2XcwWYiy0uuD8XyUIQ\nLZf6Ks8pGUM/nK1Em3N7MFo2pcM6/uLYKKLm7zmcd7h6uUgg5yvAVfBb2QXE\ngyt96DlPoAYUt5GMjxqslF26cyA7NOSZ+jllhx3YsBSpriZbbGhIVEPQ2ZV3\npfAllImMjEHYLgGRNtqfwon3BpXihhcdcaFCnhUbHDJ6L7ZSkgEWJbbE/7pq\nfPrTxTI1yEZPPj6SnxsUKYqCsulDeD6FJx00vk6nTh4QecTEPD0WboGvU5U0\n//CPN6l+T83hY/0BQpiuC8RlTuvE8X3DWnUH0Mm5LP0V0d2xBRgdICpGsiYT\nW5dJl7BHUhnASV/FJavTfX5QJSqIOcXmqoEO7Vur7SGdBrY3dclwo2W1MNgy\nuoObSE8Fmukf7VV8nTonvctZC6H2WzbT02Oe80/+EupxbtLjEtdHBUp2Prl+\n1Tkv\r\n=Eu7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoRggiGXIPXrNeaWZeK7zfNRhZD7txBcEzztBPhPrrOAIgA9SQSzssnOtr/Few46fS3PPeHwHPCTKfw/v7x7EwrUk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.4219bd20.0_1588635136707_0.35569059478780507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","@material/mwc-tab-indicator":"0.15.0-canary.1d83cf6d.0","@material/tab":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jf+SuftWWrIPb2r8GzovfCYIPfILixm0TQQmacMHCfDhhakv4xWrWwaXq70uOJRFVj/kCAIVXk350R5E16zlpw==","shasum":"7b985659852edd1064c15fbeda0be2490b34d9b9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ52CRA9TVsSAnZWagAATa8P/0Bdb030gXtg0ogQhlaI\np8S38mBI/z6dTe8wIDSUKRJJU0bggWDOvK8xl3Djpw+9xQZpqHW7LiolEZke\n8Ckrk38X3mHeTocd9LOTCkU0E8RPmYck7bmhZVcpQnRHnaHehkBK7y2/apF4\nSg7k8x/mOggcgwbP9esgzxVon8MBM2Ytf/9WIBpmXUX3rkkTICVwrX51XOPl\n4deC5f97K+s+endnrFy8tlcptJSAdn9vFvgm5E5F8tNXqPPr20bqEhgmmGAb\nln7B35jk3BY3tv6HUlYV7HtRLVyGmO82i19AiaujXrWs92AKJfAPUZ2f8Ee4\n+C95VhfjCQRZ/jBl01oIW/QvYhu5AC0NYqWFrqjS2gQDhIhBb/UeKjmYVMqQ\nsGGTVBBUYQb0lgoXgDS0Gzkf6MZeY7Z1XqlZe+8GA9iNFUBYHyb9BVCKkiGR\nfn/6LdS3YdQRNNWCPzKLIZevCfHnjofxQmZCefC48HR7hSd/MIrqqXEXFjKQ\nA4ejDhTUk3FwjM0WAtJAMUnA/h7W2yX+aN9Bhp5yGLfYq1AmXRmdPTojYU4b\nxOdnUCySdX/T7Z2HjjD4svC1VWkHunvx5MQ8CEL9ZpJ54uVglwDCLnP2hq5H\nyb3ur93IlIdwfXQ55tfw2orVHdMNuOgkL3EHWkoW5C+lUaRhOQ/42hQ9AznF\nBDY5\r\n=mNn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxLDBxdwb3hAeVi/tKtKBn69znxvlBRV4kpxxGAjsAbAiEAx/MDTNInNm0U+JoxQ1G+9rOMspwk6sJlK/WEBKFL31M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.1d83cf6d.0_1588698741956_0.14474246788399991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","@material/mwc-tab-indicator":"0.15.0-canary.3bfc63aa.0","@material/tab":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ovjk+L52RAJa+xbGgOiBCepDkW1Ot41yz2B8ij5EjQnz6HuqDWAVfT0x+hHS+TLRi1tliWWwOTzkr6Q4wi6p4g==","shasum":"a6e579a9d5ca519a626bd807641f644e3183adb9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazmCRA9TVsSAnZWagAACVwP/1+9qfJ5IMtDNmHOcLhw\n2NMhBxBPBOGY1WHe7HlfNP9SAtW578LlPBI3QYeHZdDJgbqMhworKHYuz7o5\nCpMYVYfSU7h4WBLjKc6A+99tYoVm1V9y1o0SWEkafwRtUR/u5TFaaIxvjzcf\ni5p42Bai0YKPiujAN/CAl6cRZ8ypAtN/DThcLhpN+oKFg4bmTP3KaNUgFjxf\nQkCTMRsdqOC0N9gu1eTVAMHmKHk43KM1SFwsDcs1myGfJCv2TsDTmPl/JqT7\nelQtLViohfVedJlFHepTEIzf5/z65fvhM1EjMEYDPLpEhXpah9AET7x/mJtq\nF1018xeCkZeJmmQc5edoho/oyL8lbfLp6NwMS0FbzkJvvNZs0lOsQI9NFMui\nR7jTO3g1u30RWOUHF03MVP2AqRgUVBhYXuPGFJhI3CicfmTs1T6Y39NjR2Sc\nPv6By3m+jgjH9Asx6hWlerDqTueQQtiUJqXzKwSKAuJej5Z0TZqoWZSvchE9\nZQ9Wi0EEoVv/vMIEp73rkyTLWgGQmIJBDjWkajRuOxyd1vUHL/epLw7ZxZOT\nKz5fwN9hG5WKEXv9W8bT7woGn09mwPKodwpV8g7fpkHB4/Pjz5SWOwrnFcJY\nvoWOiZgWOFq8IjsXTidKmNzYCeBFiKy415sXSsWdYWxBk8YWAH9xNNQxVwTJ\n2JSi\r\n=1xnr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgU0+NbiyoW3yY6asJcjQgYXSmCxKDCOtcCWT6eOOK8AiB4wjvNawD1Ujg7Uglrh7q38ut09jJW//70aN4Qe6ZecQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.15.0-canary.3bfc63aa.0_1588702438344_0.2676594084252921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"^0.15.0","@material/mwc-ripple":"^0.15.0","@material/mwc-tab-indicator":"^0.15.0","@material/tab":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Ir/RXhFmU+9XhSyOcAcAsQMJY/4h6ivxOmKxL+9h1WH77QNR4INN/DU7YikAkPiTqkqFwYMRQ40eUzOhZYMB+w==","shasum":"098bf1dbb615a21bf8f08168ba20f5fe788d93d3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.15.0.tgz","fileCount":16,"unpackedSize":69486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepjCRA9TVsSAnZWagAAuSYP/1i4ZQ+478SrVcxou4Zk\nTSLAy+2e8mmlLOFRJAKpAtYzUHH2cYnMqkjv7VuLDzzSOX88BvYxSH+buUeW\ntAdJQlFbafx+TgkzlEiFbv2chVV+gzjsIN1XqVN0NoX4gTiVnLoasZV/2p2y\nF7ecWi49tbjTL21+Bo1lWcLAnvY1KU9ORE2gn6QVvgeEhWO0qjvWLEEpzccD\n0hsS13BSNUUPIHT0ZVMCW+sh/wwtaIcpiALsY8L8R80qAfdh2wpi/ypXqb0a\nnEzouxLrBUf6v6SpOyIVQ41tPA2pyYHTGqiLtS95ic0uDt+abcEn/AgJ4oTt\noFBQ5HUwacgUvr8rxXqXv5qfnADPfAvJMy09YMl3hvLgI0tnKDCDJittJ7+d\n63nwGlkBrumPVKtAmuVnsb8jMmWn084K3XvI02AlWfJyEjAU4CQv9G/0/6fW\nzHyAO9UD6j7m+ev90jtXm3ZUDfrcCLp5WsZqLTZvPZdMpdrHpnvH323rZ20N\n5oJXFDT7D8uxDiXAcxPmC5vSaBtLtAHy+ckxEgaFQd8+RHmQmxR6IV0Ue8rj\nk9YRJNsu9uROe4CZCXtW2hn9d8e8bx0rxqFsYfO6V7mLL3/JhadWBhlVemaR\nb0NDW+mMKg23Pc9LfWz2Q4pt3xfK39kAVrk8kgUd+y1oeyht1MvaRzt24WBO\nEVY8\r\n=icxt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENo6XHpOmLtuv4703QA+sGKBRqboK09o2xIyCEWmsKUAiBAewnFQ0Xe7LEd0RFteRZqg/NfDcgs7zugFEgch+fRAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-tab_0.15.0_1588718173471_0.755341781274069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","@material/mwc-tab-indicator":"0.16.0-canary.1f4e3d1c.0","@material/tab":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bi4qVqiPcEugWfkSsWnoYBAD1yDqqcOduOHxz+R25Cgg0uttpgMfwiXSbGeXv9B0T+Wto8SJWFg8KNpVHTxh7A==","shasum":"8cd22a105b5964789ad2503eb495d5f61b369e9e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszR4CRA9TVsSAnZWagAAo0wP/RzLEMhGVzIBmQ5lidwp\nsVb5fSlVHnBEYOJ8Uo7SF0xy71X8L9VYvCv8yZdKJBo9KkNJhNbURoO2isGn\nfpTD8M/Gu2NWndZUUsuV3KzxQ3s/Vj+6/ipksCxyYxXE1s7wetgwyM2Cs1Eu\nVMXoc1cYDnAsQCn9VkrSDs477Y7sEZgWXZ69e4mHmL0uCXWBKvMZe2Rn6YK9\nwvtZiHrQ9EW8Io9RnPQFj8RClvHt2K2wl8etR8DVFBh/wYR91M0vsww0hVoL\ncA5IEQhD2GM0z29gpJs7QuSAdTFT7VMGb3e+yxI2vKChkDNxkM5pyeG8BDPm\nk9ocsHkI0tEyhg/k+daVprC2DR1rXR9cxBlDn82B65EgXFnIVT+ocR8tAk14\nw34d+XFVl5yxdT9Ke1Yqceeh2KV26agiQI4d3zLS71r1pXjJkjCMGT9WX/B7\npms6ok34aU9c4FsLVvorniX03EjFA5grv24RHUl1MapimyP3czD3vTVjz72Q\nNcOuRFh/9Mte+Yz8g842E+oPa3ooelphgwAiO3d7vqg+2eZnsN/oga2mhM6D\n+sf+Qo1raAsCvJlrcWDPSQL94b9/nKAkWF4biiHKzsuNBlaOq4QU5UI+4EtH\nkakqpC/8D0BN/575BAE4jgFtKg8w7bXuOxS7Mg1UXamCj7c6uICxSn6LMEh0\niI85\r\n=jEMu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYpd8UKMMeQpp9R215IefctBEPuJILwO0RbE1XgxgH2QIhAL8vbf+slfA04Y93h8lfx3JhzYKp32P9fENwLTmouQdq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.1f4e3d1c.0_1588802680035_0.673325744165034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","@material/mwc-tab-indicator":"0.16.0-canary.bc8759d5.0","@material/tab":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-t+qNKfWgoMC8LqVT9hXt8UUAGIwEA2ct0rINBwBH43G7Odiv5cpDbcfo9qYQg/OA8PwOFV0bJ2mrBGVT3tlWOg==","shasum":"e66c5f41510a3869523fa2f32a1c64f3cc7f636d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":69572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZzCRA9TVsSAnZWagAABhoP/09HPY6lriheB9q1b8Fo\nyrEJKJEdggcf9y/f5qNNE6v3JnhkFeeTDmerlsq0AKJr7mfLfi+Nn0URWVie\nu3KsLETXW0kDwFje9iKnmbqhkEIxcdaTOgzVcfPQWPMLRALcpguW8lN16Dp1\nFYvOaCsca7HWhqKSg+0G7k9OZcohUn+PmxtIkNovpX84VaBhJ9vyKAqrV65m\nk76iqOLbCD9FajvVjKJ3CAQ7EdtgV3hQIkjr2Y+HBv+DNYgrYZm60NIOGAb6\nLLkjKKWpYgVQ3gYowjT+LBhs5KvwRaTc10HsIsmmvDhkIyMF6+k+pr93ztM9\nbwPSnWJYN2zxHKwkIvojOxmS85GNHWyyNtQLaLRLphPSS3BVgyWGIltE1QGp\nKFiQBnw29itE2IN6VzWrUkIcG7gjOLarkI1A0ZfX0NcoDZ/3gpwhHJ+UX8Hi\nML6aHHWIiusIxMid4XkEMhH0AlD6wAMS1XP5tFqrsgDkL5RP//i1DwxvS0Pe\nbKu4EAH9AvG0YuPrrhxvrdhrR9usUZ3uRas4NYKSGIn/lnG3EshvMTCaqpvp\naTc/JyFgYj4x1yRuz/XZT5VODKj1cWO4L1imjbJmKXVE6LAvE8m59viSrb3/\n5Ss9fn3JIOqqlMilgpIIggT+Co3oX0Sz9lzrKV7HmN/7QMXDJxsv/hAWEo7b\n9ols\r\n=lgO+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDI8V3nW2ykogiWXumzlNSVP6D2waDRXV8YwuK3kK2pdAiB4VV6BQZX8B81sHF+5A2xlC3p63TzI7m1K/gGmPSyfcw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.bc8759d5.0_1588893298583_0.4312350304516759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","@material/mwc-tab-indicator":"0.16.0-canary.d1379acf.0","@material/tab":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+H2RqoFGuyFUmc6d4rF3YYDftOccl/B+H/RnPWO9BqrDWi4SFRLhpiyln5JY4MB6GpV6M45irekrdBVryNnhxw==","shasum":"d8b5dad784ee6ce7624b93bedb43a91111a72769","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":69666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnJCRA9TVsSAnZWagAAyUUQAIVCbUTlGPH4VxfoYZt5\nmGTk13trC3QxQp1wssJBPtBeW6/xCqdp7BV8s7akNBvznOK/TyzfwmmC2XNj\nZ8wL1lI37DO8tk+p4IBLY3+lUQTANuOujhmB38X1ZPRRkI58AZqry+5tTyKa\nlGicmtQoYnsjzxkrVvkO0BmzaI4XyPkAJdyvJMuNdDsUFOowgTvda+0cRepQ\ncPF92vzowK7tWZe50cPoPF24w83HfmjSYcwstwU0EGZaGUi0IdPTpGW/qP4n\nkDaE0zpuUZuEIm5ZPS1co0XKqTSIbjZxX/4UgCwMy7p9txb/RYM14rIKpVv4\n/wl7dN4b3I35sd5XYj+561mSPakOoWPZo7ydgBKGWh150SAnnxpwOwjx96JY\n+xbjfXR77e7PiYbGG7+CaDzn3zaPU4Qkqfa3s8d4XWBGlmanMC8YioDPC9vd\njlv3MDQdwFh3c81J3JD8ktITFYLosF/x59uyAth2Ct/TcW4yIAThK0HhBCI/\nK8LFt4SLdBJFHl8ZG18OLjfMXGQmDLQs8vo+/51vhbsz2axKV0d7BxqPdq0o\nMCDXeY0vkR9cdPG6i5kzIf0g/cczoXyyTu6crQmguBGVN3TEsedEddfkDGxf\nsLO6XxQCO7HcvQRdbXOkfjGG30SclNj5GND1DErMmQ1Ewkd+iTQrR4oZrRle\ngRLY\r\n=5aN6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDch6u2juBSKuLKJtSagaU2DyX7ym+qQyntiKtUizNGhwIgbZBseAWBeARW7cDU6NqvhgmMFaNwnL1lLDVwdTczaGk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.d1379acf.0_1588959688096_0.9426418027900278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","@material/mwc-tab-indicator":"0.16.0-canary.58d51fc0.0","@material/tab":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z6mbPYzPn2Gt4jsPKxZN0Gs9el2qyDboKyK83PF+yMw4MLs0OS6AiIq0PJPkCsM8rE6+NK6q4w+aOFpCw5flgQ==","shasum":"92d81a57150b5b3408629a8ef0be11ff2d120f76","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":69666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBZCRA9TVsSAnZWagAAAAMQAIkgv51OiVizj4o8+q2o\ns1a2oUTB1XkHI/CulS7w1QXOdTb6VeNsZAn4ZzM7sFOyIWkPpiG60Vhxk965\nkENloCItNpkyWDe6t7b7jmsXOqSRFdKw7+RPGofC2S3dJBOd/dyPWxCoNuzc\nQazGbObNNbyvmsguYfBBHIWraV87M8WBAozgugzaR/7Qn3xayXCcLQJ1H1y5\nxjSpV8KBi+wwaeVeoOzvMzxIJhUxAQMFYupKvC8wty1xqFFPMrIC7A3ebftp\n+oEcVGuEj0i9X2ucRrNXd9QVZ6yEeXyGcOyD0QNIbJoB6bkW84ycyj6vDkRw\nSjf7Ij4B0RlK7+JhHVNZRVqX1NBBwabJsM5keO7IemjWwPrS7KjfWYmaPQbr\n+dr1gRvCnR71CuhFM/dN05uvoCbKBS0LSWIp/2yv1ajOSfh79kLQGnCGZsci\noD4h9zvwVgeVZr9z2mznDMQH6D3lVlUj9YTu1SwRlCou/Hjkaau7QMxZVVoq\nXH8ZXPznmbAPKp86lWirO2I35DAxSsH1lB6fY1ntcApf32olAB/yUX2OnXRn\n1N/zraS9+2Ak1lXfrRfQ13C9KJIFX0WGy5hoy0eR4+hjdkJf05YNXNzUNUnB\nZ7N7Pa3r4+feR2lzxsuE/BRuaOAKgDtxDHePOx8+gPodQ3BC7aVBBYRW/K1e\n19I1\r\n=C/nx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFw0UL1/YLnAmcTjeGBnXNrX5wHl1BauHeprL1yA25UAiAyv2M2uKU6Z6B/waAXuah4sRWNuqrFn5/jfIK9dIyguQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.58d51fc0.0_1588965465408_0.4566939346271226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","@material/mwc-tab-indicator":"0.16.0-canary.588062d7.0","@material/tab":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hcMufKHXa9HwZoslRBWJnAovyLVSmLE6gJHyz10s0sE7i46dnQ9LvHDqSELx5z9mZ0zs20BG+54TsMVpDr7XHw==","shasum":"2f8a7d335ccc89811a93453c1f2e38c032fe6c94","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":69666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3vCRA9TVsSAnZWagAAk08P/3APtxC3SGi6AGVrZ886\neGMai2HQuJePp0jXpBx63DwsOLGu8OEdSIn+TFb2bNRK+NeLYBa2WNbnYXeO\nx6WxGq+boG2PzTSfokHG+IuPyN1Dto7uN9n/MSPbKDDhlF+VzYX1Wzvc3dDk\nfKrc0QvlESuryT0bs5YF+GaifOYxaXjEpu0WseGOOq19W7zbVJD+mIVmsHbH\nekoRBBk9fi+KSXIXXJdompLuGQlpEVgay3MwUHbq3EQn7PogZLjkCDGeb9gR\nPOFFSM8VaYDDmchahCGs0haDZqTcVWv+D/p/cSRDkPY1z75VfEA2eGFs76a4\nC04ai07azx1ToypNv6M/oY4UNihewmil0onHGU4xeIhvbgb1rHl7lrWhqs+E\nTjubySot4rJpIOmi+BwmtA7hIo7AcBOyvBsSXGavPzSYdzb2PvdRkddIPQcr\n4FQ/9pvXElpSmqKZdYMfW48La1LBz6YOORBUVNhYX6qi2FoqtPPdI9OOijxL\nZpaFETQ3VQKgCtXadjKSl9kNWZiEqPKYXm+bVEskvkixAJxSiiwkRrg92tRZ\nOkR197WXbJGTZ4I4KC22tM5jtI/SF6SqXdCWckrs+YCBmfhIh2R8t+E02usm\nRY9UIFbiM2eeFlUow5tP15omw6Lu29+end56kE8rPc5hKdLUJI+ZGcOKUGoq\nFU+m\r\n=nT5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUpORcNnrRpgkTT6uDR7/Ew343lnOjJq0Fqmr9d3WeHgIhAMZqUIg9eZH6N5Zyo6w0ljTHo/fOpXQ5iXVFgCA4k3hn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.588062d7.0_1588973038997_0.7840134612433098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","@material/mwc-tab-indicator":"0.16.0-canary.fa21f639.0","@material/tab":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aKSqsLHrQ9Q60icweg3hEs4sGs5I6qumr4Q+WEUyjZTlLxxNaKezMX1FUEkiJqgwvBobZF6SCT4hFj60dxElMA==","shasum":"415945b099c04856ea09da2fcff891e26aede0d4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":69666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYurCRA9TVsSAnZWagAA3NAQAI/UKhCO7sQ0ygRazBKz\n76oEi2GJ3PvoXSVJmkZ0j/skstO51Q7IvrE9Xw/mVWNiwpRaZww9EpaW63Cy\naWgG/57JYnRkJaCNNGpPE+tkZsRFEIz6BTBtFDOC4QcDxTQKGZdI5byP82Sr\nWM2QhmwRt0g0Wy/4FqUchVWGWQBLnx03vis1QvjmKvxSsBO5pUqVnhQ7phmb\nPPeCrH8bhtmJKXlTuQ2O/GX7P8oTWOD6wxABpPcP1wetDK7thClU7dyyma1b\nDKJGjwMAcGf1BnvvREsX5z8FKtCnui9EIHr6jLHATMh7rh220h7v7IWY70OD\n5775D9UTOgC+Udp5yxxPMVHZYUfAMUhmywNDmeA593RIGyqmIq3yPSnpRekC\nfLhsWJFPKTx+RyUk5ycOQ31zQR3C3qtWHo7d1GgEh6KrSMzb5rL2KnvZAx4A\n4bgsEDwVYE5gfWEpyvEbfA3eP3kiaj77/UAlpUaI2r94Hq/je4Ko04VoNE+b\nv/v/3AsjiV1ePXCv6kUmPoptY9Yn59SLNe6xbkvQYGuauP8UFAeSZKr+ltzu\n7SgAZkwVqsEA9LNGI8165TpB6vzYI6NX1XFhplJDoKbCVHFx9oCTmUe+C6eY\nzzp/gZRoqhm3+UQEuncYksTARtpIGywmF/NPZksaMv/sgf/EcYf0iX9394ju\nJRsq\r\n=Dcdq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAp1/Hq7UQvXm7LN/r2NYQ5kLX2tcm4yq5ZAxoC6xcVzAiEA5nZC/aieuZU9x6JAX52f3QBuv03qQX727oQgUKz3mjY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.fa21f639.0_1589218218740_0.6001925949663693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","@material/mwc-tab-indicator":"0.16.0-canary.2772c509.0","@material/tab":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vFm9hb0o3klzRAdv7juJVG/AsAVdcrDZt5k+B6R9XwjiNwcMbZsmyzj3Tt5274U0zyry07PqEB9/i2W+9etsdQ==","shasum":"256354033ffd8d03f37cd31597515715fae72565","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":69666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtDCRA9TVsSAnZWagAAQi0QAJm6tRBwHq9CL88Ln8Hb\ntaDAACza4w9W/hN1UyJqsBAKDqZmPISoewXnpcfuz9dJ15apiMVcD0SzFOI3\nzYidCn5pYWkRH21B2mhZ6wNKqdevYuQE6UOUd+q77vepcA9Pm2orXGpp0Xy+\nsa9xZB1pcy4WvQkkD/IHlnlHxHpmZNGn4gj+lZiuigxy8MMKhK8yHxegMabV\nx0vS8BqwZevOzIOOjUab1hdljJee/yVw0hvxmnUVU0zgxWQcF7u23f9++IjL\n3kllbudJkl0cYY7U9fOVqLvfEmxgLyjJ5YuLQEYl4EcZcwswSnlxABMIegVR\nJj2KC/sZs4TCT1ZENY5LcIwNioL/g8lihOXAP7uKvH9B2H7WDU5ezK0gT0cf\nTZiT2BLr1gU1FRpkML6OSitTXgmgRy+gxpF0Ui6vKl6lKxb9uMIhEgfND56h\ngpgEdxuhDoPEnJ4BUtXMBNMfMr7UourNJZJfiXoQ7Qo7DoPexn757m9ehBmF\n1HQM1h94U9vNnCHYnyldOO/LMji+6Xe40ZnThZCKy7nLJzfImveRqSvCA5mk\nGiroa1+LcbyDL/BfgEWw+jpP3DPLo9mlqDCz3LmhNqCu0raX6pje/676JmPG\n7NkpD2tY8ahhOTl3SWM1OrxEW0qObR2bS5KDtY1m/BnD7q3AqbuQxxyKfvWL\np01l\r\n=fgPZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHBLnXN9ryfM/jWveRcbFEh0YqujNgAWPGZRx49sM0/AiEA2iYwxfFQ0FG2/96Ghz6sEJY704GQie6qBW6EWj7yytM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.2772c509.0_1589222211424_0.9477658126923127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","@material/mwc-tab-indicator":"0.16.0-canary.fc4796d5.0","@material/tab":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QikHVw/LJZfGtotC2zX4J7u7I7sSgI4JvxKg2bziTWulS7cGThNDVLee96iUFLULGHnvgLRKZBzuuyPzRCbvBA==","shasum":"dc70a0d4a03b1019a78b435493cc2f59c09047fe","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubARCRA9TVsSAnZWagAAIY8P/RiiRsn3gCa+aD4zXs6M\nfVZgfnoiqTxSahOfcDcBg6d2sLy8SLigj29B8UXsv8Yug8InVxKLkVVwZg5n\nasysmHaR5FA25/gH5vth9t+johJY5RxQ5wHkL9mtQ8Ltfn6flRzUs3O3U+R0\nnS1DD69LGryZoYkJCLybqbWmqbUf6Lr+fLzCVqxir+u6Yd6HM/qP6qO7ctbJ\nZQR6RiyC1j6G4wD5CoLnx1M2C1dw6rAmPuOzvmgjApMOVtkpcJ/yOYtOdyO9\ndS7Qi+bcqNCost7nt8lICMG/d59ROYUo0cxjkmugKx8vS7Id7ZbyJ50/HsqX\nFm17bh/SomBoGPfcJVNet01btHz0tlPPmjos2Et1YlZ+O9JCDkwRlVEiM4qW\nkigHdbx3L743/TUUoR8MXPIGSUhtijyBjNLgZaP5elmjTlNTgsBbQ6GJ3mwR\n/ef+vvucOOlJkcMI/rDAXZh6jn7SY8j2z8cUJtC2kmiABGWW10MqWz9Eo8Lm\n2rbJZC1V1oxeE8HwMhNTNQYc1VUb7vd6O8ZlvXMDB1FlJtEyxk20YiQU/fr9\n71XVzZWYXVJD7vYpO7zItCcWTQH8Df3p3JwCjN4IOpXS7MCDUc2SG9uPt9NY\nGgHQ05jPcjwhdwgVqBGmQLZf0vkg2cVuuBbtkGxhYeN485jQZ/6s96T4oNYo\nF8sA\r\n=Dh3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfuBRaHHSZvfaGL4KgoDVQhlX5mwcjKv2+N7FCL/F3aAiEAuPsQlMAvo2T5I/UAInBVS3ckD/hWa5pX42cr0eznlKo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.fc4796d5.0_1589227537531_0.971573871042064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","@material/mwc-tab-indicator":"0.16.0-canary.0d1c5f2c.0","@material/tab":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HCDTYDDnoDuRUvmJBHyEq5pNyfItQwit9dY5PRv1X1QG4aXiXcOy57rnG9Xg5gNR+SMPofZcVKnzTLuhbQEgtg==","shasum":"fceb2a2ff8b42f9b292ec3ddeb15893952118802","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGCCRA9TVsSAnZWagAABkcP/1zN/X6elhODpNJ12PHd\nEywENny3TOWBJLE9ZODl12fmXM7OHUYpCwuljqsDmFIvcbyl4cGG5xikh8m8\n/dM+tz8hU53wsdqokZ2xoD39KYqsQ4NHHdfRrO6/ATJY+s496kD628Tc/NdX\n1n4/V+T7pL4GiN27kh8z6S+QCZQj1LN81DVnCs8KFwyKi54ctnX3FJj5Btgq\nUlsboweBW+K6od9KhbyNKCZEfE+790uUTMLpByJjiV2dyfVJH3CFr2ug4JQe\nOYc44y3vA2wqkwbBEwKPCfzseVLsN34sR2f4rvLGf3CZ15zimVyOYebzZhfO\nummJVtCoFcwt1nqxUTsOJ4VMqv+cLWoTDZrRXz8Nwx7ffB+IsUHguiZ83SIu\n3Ib9viZY7SEyohEPz4/K0mE4yeaLsXHBw4Y34ims+fNCkBtdoo7nF3iGe/u+\nfD4UJkkpQEqXVcEVgSXnAc8Ynfp/HQvYLSfLFCthmW9WMbib43WnD4ZWubgD\nZJVyMrQ7VFvUBBXf0TUDtVdH2DEb5hyb8F405k0zhS+xofqyX9BsMw9+6UbY\n/IOM3GlF4J7jDDdVHbmDo74uC7X1eUcfepU1Q2Dk/9r5dogL9ZfnWxy0ZBKE\nD/3BnwesyJQUjenCDAiEs6zxiZC4wIMxBEaDajwpmhPhEVNgzhrZmOLOF2xt\ne9qS\r\n=LoK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeRa7gfgHm4yrxwWo/aKzcMK6mUrj98u3FgiKJPOeK5QIgQI2A9ZMLnN9sgRE4k3DtyhcXQn4W4o4uOxVg/7QW4II="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.0d1c5f2c.0_1589232001884_0.6309351311228566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","@material/mwc-tab-indicator":"0.16.0-canary.d083d93a.0","@material/tab":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hbIOV7IIgFgXjgfV4Hg4+QJdjNpp18mNbz5OaSJmMLSivsur6iIeuQSNvAhZrvZvaUjksmH2pF/kqhEgB+cz1Q==","shasum":"59f9c1dfef9af13dbbb459576652c36dd2b4206f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetUCRA9TVsSAnZWagAAhM4P/jvfk85zMQDWVBe0BTLy\nn6dxuLCiMjDv461VpZRUT3bsASOUcfdHyf2vLxo3oa4cyeWbnlwGvPBn7Tlg\nUdprwitlIgvMaO6C+aA31zhf6kE9UJHDhCgju6mAWusbTA6t3iBHcsRcu5nD\nh1wYUX2hj+jGzU2jha0KbtLrJnaj0xIM3gNgG2G1abJJ87mCrOheVc+fSZjb\ntufi6tPm7CXznrt5HddTXT6CBvvdG9vsEfoz9t5sx0aEQflmBHv4JbN5Tg+V\nVodYIiy/1puUwBIl93hTWlGnOlyNkgBosvrc6QGNEEFwZuux7UbZCn03/fm1\nDtxmEWDkpOj5lDyCychSrEpLXn9bDDbtRZtDyT3+CHNGUVwgvs8mZGwUc1kp\nsF4AmD4atIQoEgF7gmn9bLd/CHTbHXTILzJ0bAqrfcuS+6S19fpMhbQIHs4T\nHYNtk8H6c7jfYwF3j24VAQkDqbzPM5f5qQ5aCjOWFXe5I3Ov9JwEgnZVaNsv\nrguX8L9bdsWxIgQoTYRtzQ4funTNskHV/MlhKh7izJsrrzpQfp93yORAHqOf\nwOr2w/5ek3+4aEz4561dQ3nn8jntYrgzhSzSx8vUobV8gdgOOJr59WYuq0lj\nZ+GMwNXJYIg4Tndjc4xrXqnq2yS4ZWPLecW8U0H6XeW25K7rxJ8LYsW+deb2\nBtEj\r\n=7CHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpvirc5xdFASEUyCaAxKfnPp9Q+VM6l87K2oV+sItgHgIgMdyBMEmAMkqKcpn+bgrbasimPuAOrNjz245XbDiP7pU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.d083d93a.0_1589242707630_0.24417919115968978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","@material/mwc-tab-indicator":"0.16.0-canary.c95d429c.0","@material/tab":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ObSQQbzHrNBUhmJ975HyxyfOzsLkJJ0YgtT6eVjlDk9eqPoRaDenZkQLZ3chtqJrcAkPZhwNMviSOilDsXipbA==","shasum":"4cb53cea0842019605af12941ac0db4310a33797","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcGCRA9TVsSAnZWagAA174QAImR03l+RGUA6CrHMF1x\nBY3jZk5dgzgG8XhG98aaQqJKyIVPXyTXoN70iwztFRpwFUM9R0XnUkGjZO2P\nkvAioxgG037/hkT7jz3FM3saobgOQayjSuK8NSOXx6wcO7KWiBNGuAxfwgr5\ngaVYfTve04I3U6jVIXRDucxBnAwunmNvr+UczTVAtYEGop1p58lUykpRr1hp\ngFx5KZFv+3u/LsYI4yaoPKzCZq01uRCnyStN96/tgEnPSOuKzobkJ5CCRMsb\nV/AQpC7wljETZMwTt4ciIkgHCGKY27XK0YSqgdXrpz2CUEqsZJuL94bgKp6S\nswT5MlZ0Jo4XSH03jSe1MZQ0rzDV48anTNP9ymScyc/C4tfPcSLRtGRGkVpv\nZ/J0c2OJPZJc9mhMzuKKkXFpunM9TOZ1s7w/ZxdzbTYHH3ZfErpVa96aktJ7\nzBckEOEbRV3o9txhqMCZtIJqKNPbrw/pArFEb7w+C4oJK9WKPm3glt5sL3Gl\nwlQjxHpZG/msctcypNgga02pfUVHwnISmQhbaItyiIcp6QK6iMwkl/kD2wMM\n1ibOaqRBqCjec7RQazlIFH2WpRNQeTzgGTMRVkkkPgpcMqdukK4CAspzbX33\nfbKh8xZk38G/IvyUtwNNddlSBG9aBA0sHkh+NxhvSifcyEUotExjzA43hwRP\nNwsl\r\n=5+dn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7AakWCBCCL1vUdmeqncGAcW75wHAainpwkK11/Y8ZvAiB+YpJ6c6aboxZj+AVBjLfyZ31v2+Yre2lZl1Ht+r3rOA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.c95d429c.0_1589319429801_0.8601512101419972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","@material/mwc-tab-indicator":"0.16.0-canary.0c1ad726.0","@material/tab":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WEpRf8XNHafmrKhAJSAU5m69+WKnz+1wsPNs3dfl5Na8x1+/ThEq5CYIRw25pkAle2U1lWMlgz0mM+WgT89aZQ==","shasum":"14ae4e975ba91d5eea22aa5d9cb51fc0a60b13e3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CUCRA9TVsSAnZWagAAEbgP/2ukQbZKsntmZW+2xUVV\nNL0xuvotXEeUyhM36EV4aJWEahiKzZxu+WiMGsvKak57dIHC0ww4sq/8qBy8\nRIbwIcOpn/StKDqIz/SA/8iTtVEuM5cldA/NbJmFXb2KcLcHQKCGqGmll2J3\n2XlV972BRYY+9G5MrZdvnUlttgg+x80nEcFqHlqTEmMWhKkBpoisp/Hbj7X2\nS7gIgtdnqdPbmBUVTbs0WKXiaHfHhQT8rfpcFT6UAVbjJiM8/wVmTAhWDk/v\nZL1aqT+jqCBX4/lXnlg91bRzm1/MXinWWhDtydfjH4rjY1LrVwzDhLINqmWd\nLeB86fWTsvDGLymz/ZuyGcxchjiKEGjZs4NiJLSvLyeCusbFlPzqTmJRbGo5\nqXxdLAhcxq+Yjt9FolW5Ou1ZDlg2kUMdK9q+TM/1BQkTvF0I+c7T7v86f4fe\nH05cA0j5EvL99ThlxwX1DyAZbSM7a737subrquBgrrXbbMA28RSgl4I5y+Le\nU/+oji0en0K/a1rpyGUTR0L99O40zIsXkrZLanmef/II0xjoCYMcqgmVuSM9\nJg0EOReqCvXymEhxYZVcomB0Cu6tyPKOzfA3xRQIbh5C/INMUjv4A2akQf0d\nM/j6KdVGrA8hg8BSVauEo7GjzAcfwT5KMpTJgPvaIfqrkZNTZBX25iC/4Y7W\nTMG+\r\n=IAW2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZNNFjCD1j8H9ekYz9sOW1kSwleqsFcmk04cU3kRnEhAIgaftqC0CELWMj7P6zmxQF14+C/n+VlM4jEWaUjMGxgPA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.0c1ad726.0_1589330067888_0.21474962040446943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","@material/mwc-tab-indicator":"0.16.0-canary.8b6a4700.0","@material/tab":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tv5cn5/L3uFgUkPot7Kvncll1spwvAiIC1QiXA7s8DLNBHC40kd6kO+ipufswxum/tATiOgB57WE/ST0lGBRPQ==","shasum":"3ad3e948b3c7faeac999f38607c4e9a31607142b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwtCRA9TVsSAnZWagAAt2EP/RgtClLKXsqWBYMpTu3x\nxTELu70HOcd6oONJ1ePGVJMOfc6VWzzJH7hA/KO0C41AumwJsQlUpK4pLKBA\nxiXmmq6ZKrfMRR6Y/NIFyAERTTgL1/v32GHBck+vLZVLZIukfRdcNkfk04R+\n4kPP3CnMMtscuuOcT6kpzYklx+a8NvqXP99EppPTn9drfgleVQCWMB+UWGEu\n6FahdVrf9hZzGGtoFhvVNAxddHC9XjMRwAgmArmXX3pNYDKz0MfammY4h7ix\nQaLnL1ycChAReUqLrcxQwmem7HUt46atxKAAuIBPyl5hyx8zPTexKndxR0gp\nhVWw6FxT/eJQ7VOkC5bC31gnPG9c6EqQoU4GmfbglAeAOkSjhmjnqJX+ymEB\nrwFowhKNAdbnIeBri8b3ykLLCSP6X5N0o7CNPGJPvBOX6OV6aXihBXfiUd+2\njT4Brakc7J3APazASuD9FRiZiyG+tHNVtUXnO9S4QWZI6ClDvGKcGs6YVvQS\nOEUdj9IFOufOt82NlDnDWOwsl57vYDkysy1xcH3+2oTzX0cPZ7sECiHnHwVY\nh5QUx6ybhZPh1XLuqSRPVpejNTCELORPofh+O68J7JcRTsdCneHqtNnYJFyv\nGauKwM32TRFNPtip+Mp720w7s/IVgvEk/G1Nf81NxK2ezRt/Nn/75VVsFVKO\nWUin\r\n=lmi0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMFQ7hiyasXvMCK5qKo5+4VAHi+9SaXCFcGOYiPVSxWAIgAhTmZFUPQ9LJPqvtOmuQmeZeX/I8A6UWStUX+r/uDnc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.8b6a4700.0_1589390380843_0.1456001031230969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","@material/mwc-tab-indicator":"0.16.0-canary.3270effb.0","@material/tab":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TDkEOnhto4bwazeWjIMEX0xSFgQEBJ3zPProwlQQhKfeF3/uPOo/VitAirYiGVtmQc/lQUJa2dGHsoL352WFPA==","shasum":"3d37cc17c931da22943cbc5d9eff84453f42c6fd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWjCRA9TVsSAnZWagAAQKYP/3rp8P0Br7XZK0vhr8Mz\nTOIiX0kbi54huJN6h2Dx9D8T8ws+oBSXdyaGbzLSdFLEriGo+lhF8r/ygICd\nA39L6jMdHwQbS7tCFaMK8kmUcE6cDXdYATjl1+LewbJLdMQC2EqvlcL+ysst\nJJK5W30iXXUSN/Aoq5UbybdYg6dHQ9Xn5ArEcLFS99o7sSAmKeShfqrYiItm\nT7JIruBuL7e35b4rKwTIi+5aVlX4Zu/dd2qdsWyI+IftcpC8m1L4RS5N3qaH\nB7zp2n3X12izmPQF9F9KHCAL+WLEhxn0nVZPtpx5ZXXK7KOKZtR1Te/tDrKn\n1lGRtU+Kdx+yhQhW8+OTmbRGWoxlEYou0viAibah1yWt4F4lg8opgRW60I6X\neyU+RlLQeFBQQ4hClEnyT1HUfQ0nz7qa1QxCGZca9y1zMRcZVa6defj/onRO\nqRQT7i7k50rByJBW7NZdAZfaZdshXbIABPpNm3i+5+bwjA5pvhZ/Fx3SF/GY\njxRhFbCnTaBPW3yzgXKLQjDGiJj4tqzzjk3LYCdSYlvyxxxFZHuCZFIoOOK7\nsgGB4adWF8c0ek6e7x+pSOr9Kwz5JNPpsMAw1LAGU9CfHe2BDgygTPpggzU9\n2i3E/aaggghy0Gcy2eIfc9HCmeTfvozvc4FrCzEq1htGrxm3SCqiMMQSwxHM\nSKaC\r\n=S9v/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd0i9QaXHe9WyhUh5oCqGTXzGTtblad0Rh/8b6NYk6IAIhAMO5mfJg/v1GC06BXOIk2OeS/TmXhfrnYK9b2TN08R5Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.3270effb.0_1589405091002_0.3514300613964667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","@material/mwc-tab-indicator":"0.16.0-canary.832e64f7.0","@material/tab":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6r9+apiZ1hdvdgjB4j7rL23uR6fNol5hu+zwGzMjhgHwSa3TT657tmaXz8W7bll/ZIukHsLv+nzR17t54o/IAQ==","shasum":"066fe2371514ab5f0abe80263194d0f42dabf750","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZJCRA9TVsSAnZWagAANWMQAJu78ve6wovCkycClrr5\n+m2sJf3ysTocLTersDT2eEIteOv3EMPq6MORkzlboXf4evXSR5+ismJRgW0X\nEkkOYVrUjIveHmAznGsEB1UWIrXe3sHuHKY+chBIGZTHxSR+1CmAEHs4uqNt\ntkwS4E/o2p+D93TdCO8GN5g8jQ0kq5m1Sbg+oZhKddwvf3Wf6I1gw0AFQeYH\nyoXv0Q655wPklph5aK7PMFqyDpRYaiG1ud7wrqTRlPVptM+JznmmEV/Tv75y\nvPTs13V4CdDr/0qeiccCCr47kAHDbTWHGzy6VB5bj2B/YZ6BtASS5kDfM4YR\nfa8BFnUhY4oIDcP86MV2avdq/CmIkRdDrXzJu8uQ2n8yqrvq/I6x3IN7LGX1\nr24eDLABKeAkAh0vCd7RjimucdCX2dXQzQsYAhBkM8NbkU1vMLlmWzkUPEiS\nNgR4ftJNkuLBEH7NZkJFDUUZWaGFfKnRrWkNtUk0gH9awWf4GGh0LurDYnRt\nWw5oL2/JgljMLPiyfJSymvETU3GMN29gs559wgh0Ko6G6VlXzgfPmo8amFgD\nc0WT2NARurO/cpt597lFB2gQG5a1W8x7XVbGSpnZr6Y5ozg4kkO6ldARLirj\nVa63BvOA9nqwLJjgigoQbmCgPt5oDPEieOr7uo2epaMUun5UHW6Nx5Hm0+YW\nVuxA\r\n=PAK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvEcIR8iY/kyCiWRQ07Z93ocnuL8I2BXaZZxG9XAyLGQIhAPd//a4hnJoS+w7S0TRMgJmJ360kRerieELpL0+GmLhK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.832e64f7.0_1589417545057_0.03129686652553776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","@material/mwc-tab-indicator":"0.16.0-canary.472fc4fc.0","@material/tab":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9BpG69lHq1psYkVkWwavsRueAIpkcc89F+zNqwgUtICAvqywf2i46oZDPvoSNzRgDyJmoawTpSLYfyTl2UkTMw==","shasum":"c30ec2b6a31b89f890cba06052839bbddd162dc4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzACRA9TVsSAnZWagAAQrYP/RVw4iV8CeKbCakzg7mY\nOboyu2EzrqFToUgbMm3UI55OYdKsjuoxmUkWhok/knPMddAOfVTnNXIW94Tz\nAezZMQwMF7xnIhYwD/PN7b9WiUJPwTX5R6BPxAg0kPktBNH2b+5C6B73YJqn\n+CwBuO9H2AdB9nC4JIpd0dGRodBcxMWxxZoxDgV4o7Sf0JP0cY/Bv4YQVkO1\n/oHFBlu4XITouyUgL2nBWtXzrNrFjtIK8vPCfaoYjt4Icsi0j4ZkBNq5aT3e\nORbYlBoSPhL84VYiD62vpkX4t2QpC43kgwibRpx18gkQ46KW1aLHwtxh23Rp\nm0uoraMNX7+7+umKT7jTf91vzwz+kZ3eFQZWYVo/Ca5TVsd7jwJ+0VfIwoZB\nIvpJI7dfPAKXlhdo2BFA8yBApgE2ntj7xfl5EjR6eB40fOadI0mUCH3hPU/l\nPrkocC0HIZYxHzyAgVBr1/dZvp7fJ5QUy4C6ZZ1M7j/oGLRiUUTGXBT1lmP1\ndcDp+pptSqKCitxFcI1cdehbx28O+oSBPMQ2a8tVn2BvxsFZoHf4xDdMnjGI\n3h/PElpPG/MJZlQmrEVreuhSeDh/Xc6oKd4dSEWSNbXLp/OsXyhVesBMNtzt\nsFCm3ok5rqRzPT9U7UdriN9iKjlGH2nU30V8LEi7CtD9u2YEss6VCuyRfH8G\nFXYb\r\n=UF/S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOYHBwIEJ8LbhyISx59Ef5mUL9WWC8SgPZWn1BgikxUgIgJLmMsJTnueptLQdMdEwNjk0OygWcra7nuKmUfBLDSJk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.472fc4fc.0_1589427392420_0.77557732661816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","@material/mwc-tab-indicator":"0.16.0-canary.4dcd7dd5.0","@material/tab":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1E9b1b6EU0/MMxLaDe1GhHSgU1fqfnaQoEqk1XbdwWS8Ynw2H7+WFpWdQaTd+LReI4YLoe4sFRHUPbg4ug2qyQ==","shasum":"8c0daa43aaeaeac34bd59e3b827a2e01435d9bea","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDwCRA9TVsSAnZWagAAuq8P/ieuK9z8l5zWUrfjHDAX\nKLJHY3KtK6NhhTinodh/BTaq9lVusHr7dWUDWsiGUdoo0hVlT7CUoWxoULPh\nq6MJ62jnv39EX0yOghYtXXCvTVm0QTvGGTZn1J/GP2D+OCrV1/LUgWKKMHd+\nPwURZD5eEBLsdQHlvHn7qFKh6ITjssyu1yGyU+2ZKu8Aas4hZf2leUx5D33K\niHlI9f9/KPRakCiA6Crk4Ta0VJ996g353OvXG7JuWdVmpqUvrgsL0vnpZzXm\nXGKT0WJVkIataogHQ7VKAibYvzYEZ4v583EfoGVbpjy/PVBw02SrOlJizm2w\nHMg4wNrHR6Y4/808/hQMz1bB1jiQEiPAKNISDwlh+swZZPIkvvacQ1g8evoq\nirPaFrauuNyQABj/MXa1PSx8Dzl9FZnCl4VljP2vBJ6kisQlbPfi+okIhFYK\n3xb6QzQZUvSysUEZB2mUI8CYqeBd47Y5FVQ4PGFj2+YvwwMdKI+0kdIC29Kd\naNN1ub6CW94Nb89xtLi//jCQA9nPqBuaQySxp8MnHonEHiItqKSWfDbT1rti\nX7S2qqKk/tYJs7EJna83qLbQyqZ9pWrTZJOD3GdEv6a5DL5RvafEl8KqLjMm\nR0/rpyUcz4fMKCkBZrLL2TNUSxhX73AZtQxAhGBu6uZeg6dKF32iaY5Ay8dn\nwfW/\r\n=sT4o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNn39sfQ1QvAInhdeZL2jZhpj2ax+vRLzTD7+mPjAy0AiEA6t/eT0b+Zs23qwnAf4pUmd9z0xhj+Qkt5ytRcAxUAfo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.4dcd7dd5.0_1589473519660_0.979372074435833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","@material/mwc-tab-indicator":"0.16.0-canary.bcd3400d.0","@material/tab":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2jEMlWQaY3XsLi5Fw+9EMXuPI4XcJjluTRTF+MCOzcwReA7ovdbqQZl0aKMPx4LWLUqtjlftW2B44F/mL/e3xw==","shasum":"a8e5f290f9ed83d8adeeb32741557847fb7e94a1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxybCRA9TVsSAnZWagAAhOIP/0iRX+7hdRN7u33ydc/E\ntsIyFlObj6Rgdf+IAzbPzodtAIkx1+78kO3FtrdKONxw+xq5bObUBcAax19b\nUjGrapUtJn8DdLnypEAq9WKm6ELv8SiOVRplGmI8Fl/Kt9QgPA5mUGLhW77L\nehSdFq9fRFLf4oijn01JhBmlw/K5g7UpW2zD+Lr5dvn0vBM0s20kurbjjIQY\nLjgj14ql9oZw0Orj+2R/CtiQheTnTGOMrpdMKeuPZfJ6SwnpgiKB9pULcAHH\nR/BXR2aYLdyZAc54q+KMe3btjc4djSFB8ZmRKYoJlhxpzbSOsKLO0WJPwtU6\nZPxjiJNAM5EOgR6gmYJ4jq4TdBAYPjlHOQN7L6FJ5K5yBUezuVyiIw2veSod\n4L87UJUHOVLQX7CE3JkA12orFz95Rex9L+COL2BjZlVpf+d32Y6WAMSa+RlB\nGy03JkiDXaBLvjGAgIfE2Cu4BIy4JQylfh79wdeAJXdkYRbNb2ZrZZEIUMOd\nmZgxtlEz4x0We4+MCu2qGyfztxSia1zfmFJXY7JQx4XVbPejG2/uEltWfW+I\nZhZQmV6fNN1EFXM5Ua/k418+BezXm/OaoUaJtTqS7GoJcHT2S8SrSwVdhIMM\n9cBKyKR/gsQRDZjtOKo4iD2EjFKw/MXrVjexLRwW8Uz+qTsJKAFLzKjKMpxc\nb2Do\r\n=/bB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBH7q4ROzyY+icNy/Tsx+4QQ9Dp2vs0AtHkJkfR8wm1gIhALisA14RnM7DekNCCqiyFlXRn0jG5lH7liMIv9mUjPBA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.bcd3400d.0_1589583003181_0.21973009418211364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","@material/mwc-tab-indicator":"0.16.0-canary.91f63179.0","@material/tab":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZlHqauO5qg/qS+IhH/hebijXib4iukMniCXCPsJyCDiUGOOw1P8lFKrsJ1I0rINh1raTN0OxZcQ4bLSoGrAyDw==","shasum":"4d79f2ca3727173644c90df815fe1e44c0843a0b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUjCRA9TVsSAnZWagAAXH0P+QE4ws+1uRxee4+dQz6j\nk0pALY/r59s139YscqB/q/9+GcsZDK4vG+zXQZOvdclISue5YIQNiiWcek27\nETdU4nxcvMB7MXNB40ZWS5hTn2LeWuyG6K6x5DVuMq9a5sazdrYHQ0DcZTlS\nED0fLyOM3kSAERajaaa+7Hjen/KbkY2Qus1HePEvtMZ2Vea8ontMafU6K5fo\nTgtFtjnHnV0PfJMGKu0OVW2DHK8pvFzGIIgz6ZOUCS/loZVsrEAiIvS9SHW9\nd2b6CvAnDY2xTkH9tVthmbERcByq7wtfQzNuWDAeUUJpLNaWvHYlaeXV1HKd\nnF9EAhV05mIRQeQCWe7iO4X0Sf1L6jW0scGdPgm2+h2wTD/VhScDellE3sVG\n6adHd5X/sAxOYPT9exHvvnDeFvI3W7Yb0VVL279zWoYDqrZdJxt/BhKHnrId\nK97jRsHWkSDG4DmIB36uSTe8hzl90dXF+ha3hSQrIqWsmCfsZstbR5dxRulU\n7K6Bb/71LLLlWwhlXTK7hp6ALef0fLVY7Kij4wtXSgZKFfS+AW5xba5Xvlpa\nKBtdWuu02HpYzROIyG16u+mGReoP6FBnaWk+m7/YITBxQDu/0TAGFwyg1AJn\nTEREydIQGrLces8347Rp5Hygn0KR2pTPmcQQVjAHqYWpXm2CrHDQwtKKisDn\nHRBd\r\n=AV+J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5TUS7fIos7M9MJvfUlKpT53n56FZu7xxbD/M66VMm2AiEAudGNsHjPh5tZBGfIOfhlc3LYzLN5YwJbJeL0PDqf5mQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.91f63179.0_1589589283470_0.39504598528410906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","@material/mwc-tab-indicator":"0.16.0-canary.b8aafb56.0","@material/tab":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tQ8IHityRINmbiO26MZ+MoeDZgodsPihWKd+qVvDBRrnQJPp6oSqqdVDVoj097Er1Uy8M4Lotx0mqvAV4seJkQ==","shasum":"5831adb8815a35342c5317a514c6919ad185b6b2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSaCRA9TVsSAnZWagAAIhkP/1TDYJJIPxiq8d2jkJWb\nc7GdLoifvD8fQ0Oo4R1esuiCFFc+rwYsnk2Uce8PwWW2VkSh6Io7elib1UT8\nyYCIC4dle+4z6qinKJV7SJiX/ogpcWwke2F53nzq7c9wSQPT7urS+NK/i6kv\nsFaM3yL2PnqPI2q6WzUACVc9vXonCbsQyzSXgprpDflTHWSEzWaT9k7eKfZD\nuBRbdH1VRyArppC7ckGZnmXGdO/nZXP53b8xzlZ3Ah1b8pA7ZEsXO1oYyBLW\na5e+yCAQNumrXp738XpBNhCLwPB1ShXnfw2mUPv/U5VqXD0a2E8KaGNBPGPM\nA1sXKuCN3OmW70zC1INXP95R7ue1gZlKK3iVLkcXBpFtcqvodJrMEs10FEQK\n3aFFjoaQWqC4IGrC7KqeE+y8LU24fTMyolO4lavI0GGufAzgVBWxpuwCz1U8\nJdyFEdv6bHxAeBySHOjEFN77mSlQVZAm5PTDVGINKpXezG+TRvtH+PVYwYfm\n54yXjgl1hU30WjA92pH3hVx/5SLmYh53alRMtHD1m4cS202M9Jl04h/eYEB4\nEupI8lqN130LmT+oju/etfAma1bG3v+j0kxL4YijJF2RKG9R8LW7/ue30Lor\nFF2GVLPABxOpICjrp6JzNHclCnjAoKp58N6nU4MmtB86w+hZFFx3MC8/u3B5\nrbNi\r\n=lvF/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnz2TQPoU/SAy9kLCcBIfcnsWL+Ml/1hfmBmfwc7cAJAIgAKoECIq1QaJ8DYuadEC+Rp4wPoNfBw54kBrzwneaLcs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.b8aafb56.0_1589826714211_0.5030691027498981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","@material/mwc-tab-indicator":"0.16.0-canary.a564b194.0","@material/tab":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-H9lhY+X3jIu7CoeY7Id4R8haeZ6suj0NOR6TS79TDfGUrXxEw9TB5Rz/DL3QOQ5nrOda1GzZRfeyfFiwCTJuOg==","shasum":"635cfce7cfbd6676ee92d0ab08b2d6df6dd0ac58","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRSCRA9TVsSAnZWagAA3LsQAJlwP0E82fzSJlN5ELTy\naVTrwvFcO8P7tQ+TH/2TSyc7PayPdWXet40vw0sPUaxJarNDOzP7/HaQIitJ\nbnc9GalmObpnRT+RFiyp0yVkxZzczkgOwtSgmu1bJSDu37/SynY0ke12oeSg\nt4ChNqiRVlSP4VgMIO8A2dg3LIvmFjrZsZhPSbmgzbIs9hSD/19k8z+avl7W\nhPkr5cLXaICbAwblCtfCEf89Vp5WBm7ainfyDbvcZLkh+gHiCiTFz5FUvJ0r\nP7wJfIGRCs8HLkqY2Wz11WnUh6kIrOp+SQnRVyDuv77lMzdDacYw9bPEcxBB\nfqnGz02WDwvwMZ5hadQWmz5UxYgvbPxtTTn2AuKyoE4eT+CH/TQ6pXnoXjpO\nc/Vbr01thLrzRBpDtuSBzcT0isZqkylvAIVz/2Sal7SMO4FNGqrni8vhBdEp\n/rzQs7N4CzUc/UWE3S45QIjTnp8kzXTIY4s6ddRCZ1eHHKeXrEJY2jwrJNAy\nm3A7N/oB6VBoBxhTBifWBunDlcLJRm98NvRw7loGdt6KbvqT0gZ1Hmotlziy\n+TTXAOPwYbV0nwekkOKxl9sn/yVStkpChLyBXPpJbStY4alFjN8iKggwW/O+\nm53qWaLxF1olWwOS7SOmxEDaYa8LfsvBXsNBbBkOSqTNxFZ92VDnI1kBnWpe\n801A\r\n=9aab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDoQHvkQYieaMYJ/Y3EhxRI00yABp/EoM/U2yE9ycRNAiEAsNC0uxnIDFunKebMmnVWBf2MFil2hsHPPkfa7xS+20E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.a564b194.0_1589843025850_0.8195634432882961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","@material/mwc-tab-indicator":"0.16.0-canary.ef56465b.0","@material/tab":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7i61U7lUbFd8ojDDboFQ6pBoxgCGGx/THC+VVdKqtc7AzGH2HR0IvZkA18C2TaLOCjxbkKOS2uc95AYNzWrPSw==","shasum":"3429d47e3a60a7250df3b187b507054f116bdf01","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1b2CRA9TVsSAnZWagAA1T4P/0FiQvbU0C9KQFwoiG51\nVa3GpLK/LfxF17cHi9tiBB/JPknNlMP+1JxrXsJ1EWYe9LKU8hFtP4QdjCFu\nFGDLtRhvg3LRb81u4oJRpfQyj1TPa+Y6gb8lWMYglV4KiUfdOBMynjPYLlaw\nfj51YYmEytgJWTNplnivjwM+abJFlUl0jgSYgWUFLmwVnhyR1vXS28yzxkUY\nX1DcQdySe4JenVuZh5GshPd3ph2Xemornch9Tp1oLDdOCQYem+O4gY2f4W5k\nPXFq3gvRPFnPVx5aZn+JxPBY0InpsuWc9qBSKyHN/kxSpYvVbM4mPT2GFGd/\nE4J/g7CT+yv57poE3hUvMkyoEYB3Ly0EBiebtIblI3F8/d2ZONzNmlZZUJKL\n0bugrG3EeUOV0N5Pb+h3+e8Y6hrWwyKeYRlrxRoYWoCHWhGU7y0q5mRzgCm4\nMNMbkgvV5cQI/Ub9hKyCfhxKKALsYH9ITKyUw7c89ZE0f538Y9rIpH151Ue+\nRwtm4CBF53EUYGV/ef4EN2ZLjE6xz3NqnO1FUBQfW9Hpah8HuhAl+EcL3Ods\ntrcrFb2cPOy35TOT9XQn9/gIbp22THKHfbhKuJfz6zNzk2wPihP+YCZvC9ba\n8R6PBQGUTA4YZGLUwXhZoHxK2bRuW/FVSk+uosPE1zah8ifH5XjFezAa4LUc\nziwQ\r\n=u0Nv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDk9wVHwtLigGoRnbjNKiPO2t4vaESr0P2X44LwZAosgAiAMx0sXMGLouSr3u4EuMpZjn4D66NZielye55EeYnxLtA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.ef56465b.0_1589860086252_0.08989196753902373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","@material/mwc-tab-indicator":"0.16.0-canary.c22dcd71.0","@material/tab":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ps42+PV7M4u+k6xfUnvO91WONJ9lJ5Vty7A32CVHOxNDsTtqHwQYLrZtHWs3If0Vg04Jm1ZJtGZJFZZnKn/aQQ==","shasum":"4587bba3f74be6091b96d895c2c32319b0f56da8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZOCRA9TVsSAnZWagAAIMoP/04gh2VhPeiDW5AM56do\n+T0stgNk5XdlKzbllbz4CAOylfqLKmugR1oyXjc1NHEskpWcIDx6edVwb6ew\nyYQNiDygsHQY3yTox5/zEf2xQ0DYQ18z/Lfwy3lLlPJUmdeMfQhOXKYdhubX\nx+8B5IykbDBECS4FHAbDTH+RPxQHjSNRlVB85dRZC1Xo9BVd+e5RtHkmkWf0\nMyUMJqNYjoply9VRpSzPYb9xFIcab1JTFBVlxGKTyOBnsMYeSCXxFMYvvpSD\nxe8ucrvLzpnH6Jkf5Cz09NjnKTuBZJAVf3wYvGJK1PK2ND/IlrQ7fvu3FfqJ\nfpNWAsv8ClfKyxPGPAsOFNZybeha6J4mpP7AJvTrW1vQO1Kx6fMfGuV1/NKo\n7HQRFXqObiQP4xcKR4+UF/LsEI4BlkO1YELdOpvmUqLD/vy0T8BInF9Mni6R\nAN4IVAUJC+ibK471JGD2NJ13AUEMsvsdw+QYWJEPSePHupDvCEJAmg/ZPuoX\nMyuO5oe1kXydDdQUg8h8/ZCQm154XJeEsFB8aJGOyJnzwWEbHVBqWPvDIJr9\n24laMBz/ZZQ9YgJORIuOmtvoCenV1BEJrgcuZuUDjJE7eWn7vmJCvJSU0aEK\noCpWFGNFXvzeJPBiLroyOLhowH2KM8QlhlOQCwtQGePUse7Cqbxdzf6kS0w4\nkEdx\r\n=H+E1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkm+eR05LRoWzT5jFzjEh9Pu08F9l0zA2rAsB/w5fy6wIgLSCfrBQhTWHqITGkgUHGBvuzApPOpncU+uvjMqqOckQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.c22dcd71.0_1589909069962_0.09116237882453238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","@material/mwc-tab-indicator":"0.16.0-canary.6eb62388.0","@material/tab":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tcaK91Nb8pl2mQxZEJwkeNWd5sXBKuoSbDPKtwZi2X+EvIT3hgShPZCbxoVMI3hAul3oZmhQawczn/EiSXfRTw==","shasum":"f70ff9f47641af4356651254a503dbe6417e55ac","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPMCRA9TVsSAnZWagAAPJ8QAJvvTbPcTt5eyDYk8i5u\n43CRKqfh1fTAVZAQ6v11ktN3h3H1ZlmxhTkceKcU5S7O5MNNNpS+B582w7QM\n9Xu5qEpWvSU+1qUBLilzcssx4SI+6T4hZPJ71C3Bxhvi+T5gyW+CBDNTQ8O7\n7e1/4nelpSrACqOTJ6G6ILfxD06P8oQqM2KYbx3WUBo9p/+DWWoQgjTkh2C1\nettynA1vzrTm6zmgmBCwQlnCjEAkM4b4B0QEmhGJFlWzTiLFOKV9xBRv9OXd\nuqqSZumrmTk8ielhvLxnGzqbiwnBBvdOIgtWi6jN1VK6qIugQ4Assh7RGYyX\nnMFDUkllE7/W+CEo4UOIHm1FrRVirRmHjJ13xu9nseTgPycwxZf8wdKO5CJv\nkEfR2eMVq2Ya8/qWztJa7QlInkBo2gUHCCY7ogJtTqAKpUs5O6NX5GAojFty\nQgHwwemwo4UkXJDfNzKn46sxMkbgCBfeReFtVDXX4KLGOjyf0Cxqq96lNDyo\nGWzuIrHr7FZ3dMJ+rxHW8UNFCqHRKuk4gSy0JoAQ3ibMoGU5dmqyZFsGLqp7\ne1IhIM2mlesk0rWm8r7tXfcM9bU6+ogDd/GySe01VAdNbz7ZQaAIZ3ZswUgS\nLi7HLrY9ebFa3za3mUHwYJMCSY9DjBa/ZNX7cTr1jNZrqLM6zq3y3S0BvNVg\nVP+K\r\n=JphO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKwHeZFKFNjHnLLuhvJmhxzZ99lctuCfkc7VZuBbFPIAIgcddTipX+j1Vhne1IzM6dKiEk7lqmpg+OWq3ksoUwgZk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.6eb62388.0_1589920715848_0.33956918569723893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","@material/mwc-tab-indicator":"0.16.0-canary.9bc3230c.0","@material/tab":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zBt0pVcVPLS/EEDKRvJc1rxxjrlIeNbdq+hTKpV0dFwObKXHz5QL6ZqNb6INPYMgPJghPqDDWR1806zmua5hQw==","shasum":"56868d5dfa628cd501c4c96a0c3a24ead6d74cbd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFH1CRA9TVsSAnZWagAA+UQP/3r39ZEfe6Dcm9b8MLCJ\nrmfDpuzQyGX2U5zL00TUdZlvYBn8Z3GTTujOnkcwhiLX6oD7XwU4q+D7lMXj\nXqXWKRXpqkt1KMXK1SILdvjHS7mQdeP489b8pwVydYWUithjKYde8xXGRb9r\nilLaluHgkCEPfEmG+sOuu336VNq1Iyay6hvCk9hBxAl7uIKCCYt0Kzz/NfqA\nh2mZOIUxXno9KJIRySM5cJ4pV8+G85uEbqDAAslPzvne5sbZdzXu/XSn7mul\nLWlVNZK8OZCDfBWsUo0kAPZVvzbme/4u++CxsdVIwvXLwIWYDK0FAHDe1o6o\nqTKmyw2Scft72BXc0dvoFsiJA98NiXlUHx8oXQuWpunxQm2amueGJKtwhTa8\np4fVhh/urDeE7GY5VWjBW9jTxiawGdCu9vvv0rnJf8GtIEEDZ7op/l/IpRZL\nsIH+dutuVBlPa+MkxurR5O2W02hoMfUSByIgH7FB64oj6+UMgI1ZdgkjtrP6\nMNAWZh1wSaeZ0C11qxQs6BTH+DGcGm4KPYxshHPyFeNem0PSh7qqf4nHCGpk\nS8tycIHBp3LpZ0++5UhouNRevQjZSF0GlXMuZFlqmJKjMqGTPSFaaAve7EsW\n6bVMNA8I7kBN0ytO3Dj9y5K8iwC4T+89G73BuDOsrHht2PCqDvXjwowPYK9j\nVsAa\r\n=5wqs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtuRaNjPpXZSDbC+ZjJxmpFC0YGQJ8c/J2BUdXkvqywAiBQnpnVKCiCa3WxdodZpQKh14E3rE3f3Fd7ni7/FBPlyg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.9bc3230c.0_1589924341081_0.5601078277608598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","@material/mwc-tab-indicator":"0.16.0-canary.421a6856.0","@material/tab":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-terfI56Zhh6ABYh+CLmMwpadb5KH6Iklq/Spag4BZQNlp+YXjMON5JlwwpG7m9/6mlqxLXrsnvaBSJHNazx3kA==","shasum":"2d18ca1604c4df8671487673e2c123d0d87b2494","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8LCRA9TVsSAnZWagAAROoP/3iCMKLUBf7+QyaEGRlR\niybXbPMk+7Uzcjtwlc22pz3UpyqkxhD6mNlRB5d/hFZYzn2mpxI6AXSk4L8e\nkNUrz2ZpFaTzTI+7ltjRx5RuK7tLxmdOWCLPjMZ6VuZgnhlOqU3SALtaTzWn\nO1yWYD9m561BNSGIkqhINIAE7tF1DybixmRzoVKl7jmrqcmATjxREGWPqGVf\nj+QBXt9WdHQ2STIk/Wm12KhSGfkotnBlNJQ9ALzhK21IMzxNXbJGUbKudr5Z\np73++bWNZmwhpp35iaqxbFPexaPRyHxA9nxmzxZFo7Ty7xx2iL4uPKGmPLJS\nOLvzMhmGQgUoHVqP0A00NNPyu2tVDBHZlfTL/MCHxJOCykk9mY9bws6BY51N\ns/qZcmMBvz2+YIM9REzT0FNAO+rjLnHWHBaPIZJSq9Lbmk4iF+LZ9r0ewqtN\ndCvHMu9l7iSi7ifrRLGDy2Ghi8gpSO/trqwpo4oEyu1C+2wiGA6HkL/gSFDg\nRB9U3aa1tW3EolnfVzq78/jA8A8QwgL+ay255bYyNA+oDzCK/qG3l9wwUwjn\nn8bAuetaIUU+vP0tv93sbAE+xjWRGdeNbbqbtVhMXNsn+xxB5N74N7I6gULp\nahhoi1/s9vCMV01wuBSduBy2+IGPCCs30MWGi4fUzUK1I3beluDNxxvu5lJ3\n4Fpq\r\n=dLU8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+2RoP7tMbryXZbIv6XgZr3ZGxMKZOd9DiAD/4xtDyVAiBMQILH8t9wVZJui0RG04tD0Lfo85Z2OMZFjlgAFQG4OA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.421a6856.0_1589952267116_0.8847143405786968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","@material/mwc-tab-indicator":"0.16.0-canary.761aa6f2.0","@material/tab":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dMPkT9eyZIXq823qCymW2chPYtaiH6IS49t1CF+zLIBWNd3YHi6QcWGTnN8ORckq0cuhASauQGjvMyCT2hA9xw==","shasum":"954f0e22c8ceaff5aa511dabb3e98b7ddf2f5a87","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGaCRA9TVsSAnZWagAAV2wP/3qgNms7LvFw9oB5dPSu\nfbIbnoZnj677anCNd2YYaX86vxPaGUz563yte0ffpQPwh4yKFeDpEO4zMtO1\n8/CudOIb7QWGQ7lMC8SfiLBuhJ3ZlzUdd/ylh8cp8qUZ+etPgYrYL+usNgHy\nZq3jqtxUoT1DLcCdbKD69GiFr9OLcTxxHXYt8Hp5QHYvjBq0JeLCoZHY4xKA\nALwFp/9tEnN3s1kw73RVU3TuGhVPR7w8I72Thaq6MH/fBfbOd6/IPxysf7xM\nPO4cyaen4QgjSFnQpxmcn05BCRO7+oB7u2bQoA/vB+YoSq41sd8yM36uxhRo\n5r3NKP4FPTuIx4QVYcHOyQdi3fudnwu3Y7hgHIfnmRJlhyIHCXr9EbmjLMhg\np/+fBrkoZ7aKmsXJxgtD+A7AtUCpu89JU8luPl5qWNm4nt2IQLvX0d/zhV8K\n7nAnwziRez2lXrFtxmnLJHted6YSQEsZM/TJadvX2tQE3pFn8JMEbhzCMS3r\nb2Kvc/25Y0+xVYp0TTdU6EKVIIcxg1X/p2my0RQfLJIHWiSOum1TFR+gugkt\nULAicPL6IgksFkdNkJK+jE3Csxs7vnHaViHFw8xCdp73++j6ERt2Ok7v+2Dt\ntk0urQctslxCyAI8MtjN83P7c/axGXFoFvoaU16ySSKN1Fq1utVfF6/Am2K/\nrAPK\r\n=dI8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQDJyJjFJv9uSPKiXonTeG/k5evnD/vxSt8DVhLrzSeAiB40zf1ZpXWz33jEkRAeZlD74SrWgZadjLYxX4RxLeCFg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.761aa6f2.0_1590010265861_0.29652980983712407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","@material/mwc-tab-indicator":"0.16.0-canary.f8654c40.0","@material/tab":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gxtc0TIYooDuUgmFJ+JNB4qlQ+erF2542ZifHgvVlOeEAhJmCGoFGRuxFG7vL0yRxqaLR3cVJgQaIvbqiPL7zg==","shasum":"64cecc2418cf2a64ab0e999d60fcf6781c251a3a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPVCRA9TVsSAnZWagAA7joP/2GCg14+XEz5ojDN9s44\nNfALE+OyWEGM7yOCs+oE1K3hZbtx3gWucXZGqtpfUBcrSFnXbtRnG61H5b9w\nM5VJQXpdTUqWE7eJ8ptSJ1Gqqy+DsCGlQcmGXWLqhtZlmP4xDEE/Gu/8V8/W\nysZfpDjqpIyanS9IpAeRnZxYJJ9avppLAZ7UZYBYfF8bjGfdlVNe8+8gVowY\nnZ6LXdoSfPY8Iy6qiUiTg/fuzUo/C+DGcqslPLVYMJHp/2gFH5ijsc4rWK0K\n9xtYFvJ5CsUmFR7vCn+ZfVozkK413TJVma7Alci0kQBkM/2f1J9U5qeNQuwx\n+Kt3scn9lnUubNxjtwO6VFxgCMIZ3P5PI76a50Ez/wjRRZba+h3HfipwdqSB\nhe11oMt7RJSAUKATloJDXcHoL1e4vDx05LG0JBO6aqV/t4xY6HXWXYEwYYMi\nSYiVAJnUb9QkI+gZVNZjsFkzFRXm0QMtbqfNiVaWClMwybByraR36jOtqkfH\nFS5kIgV51y8sQDLsQqtNx6oN+aFHcoAOFsxIhJ6rn10lnT2WhqIXj4FYz9cH\nLCUmhdJIjTRibTE8aMnyQNKF6nvdfcCq/YO1FkQqCJbM8SCflbQEqtg2Kj6m\nXLqNIgrnwQh1NfifsixrW0zqKYKHqN1KXNF606Gbowa+gXF1p/0wJSlBrZby\npSlR\r\n=Atya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCageom64Sck6NpT80akfquaFqoz1QOr3QMyRsJYveZmQIgXo5moNRhrOh+Iz24b9Bvjd7iw8Tl2cX0qDxOTnw0hoc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.f8654c40.0_1590010836735_0.6000175752466166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","@material/mwc-tab-indicator":"0.16.0-canary.05f3853e.0","@material/tab":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iExgsGmlukmhs0FNX73iKU/RI3fhNmWCXnnvP7UeX0Fs1MMa2RVKUiSY1+hUZNXgkdeMKarlN/2TDjSJj8U6ig==","shasum":"8adb1b96bcf88a2123bb9d1b4daeb6072a33b403","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtpCRA9TVsSAnZWagAAr9YP/iJK9WNz4oATCaNDcOgR\nitjUt0lRMcSdMXMzeaSkD5Nf6U2kmIRoXsBau+ZXHR8Ms6aeTqaEIln25o2q\nyAuBolFJOOiB6GS9RORvz8RTRpSyN0qJ6BrXGoWDCoLhmrRejAM+2PLGmq6w\nCcCLNwIvN4xF8vGg925r9V2J4LD8eG6H2LprYBZl5lBMwtPkiYpLSNKq2Y0D\nFD9tPjKBG5T7i8TFrw74bI6n627IET8zT1XEyU2ORp9CEX1qZ8JlNOX+lBDW\ndR7o7LGmw9+avwZsmT1g5tCv0upXd++OgIV3z8jtmCeywrD6XkjcdJ8aBO5d\nw/oFl4idYiMGC/r8KUMNpzeLhA7aNjXa0GM/s4AnEKmPmVoHZhp/STaCSNRo\nHjxE/UtgASkT7XkQqvILQhP/B43XjJ0uyAvrb1AYS1UAfYO4h5WhQ4BUg90p\nYzU8KTXGWXA4Z66LUh7BMT2ckx3Sp3/E6Sbo1nEpVYrmMvKvyTHGTQsccYAr\nb8tRL8y3lxyC/Pw6G2PAUH5NLTGPiKo3t28YwosaHNB30rMBRM+rAnfm2SYd\nUpgtX2nney45RexzBI0I9ieogGwaPiCy0bseHE5JCXFSCbfeVz8YzxvBBCyE\n3n5axCyLiDDh4eAup9CVFHLSg7tt1TR362h+bDbDu5YbjwCia8bNphTG5DNy\nmcU+\r\n=V6sZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYYDCcOis6VDCBcaDK8fCiMbvMGH1SQJPWIKyxSwqR6AIhAOIaWZmIUTusstKkItQvttY2IupUsmppf06XUlMDhg7F"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.05f3853e.0_1590082409046_0.32647835889609444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","@material/mwc-tab-indicator":"0.16.0-canary.5fe61f4e.0","@material/tab":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J/uRdm6hTjFrzk6I1Dt3AxO9wIeSdLReDqrLlLyA91Qv6UZFsaoJBqx/U3WQUWU08ofYTY+7Te8rvkUitwwZQQ==","shasum":"bef0a192a8c23e767d8e1cc25eeaf57883ede53a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnJCRA9TVsSAnZWagAAmx4P/jQ46gNmzbzZmSO2Lsr2\nUTHnlE7odkn5WMNcSF9s+e3TAbdQ3RZZfbzggnJ8Z00CmTMRq+znU89U/8IJ\n8eblEXjr4mtCK2alI9P+DOgeDrjYBvWbWcZ1ZCk4pCX66SgWDYM4w5B5ziAF\nyfzywftLy5wpGx48hgFXGOFmxXYlNhJkorCyVt84YCsJf2s19u5o7SlMifwv\ngJzu/RYezO6yQc70BVS9+PaY1ostueqKnPO2vvPR4msvP3DtRjlFoly6cxIz\na5ySw/xDPrRJ+z3wDG95qZbbTxkkak+6rKYAaX5J6N0zYklF0FMicxwqstU/\nIx7CiYOIVNmSPewkLTXg9c5Ymlp9yOEq2xFRRJ5uy6B0jlsx1GCKyW7prh2p\nHAqfM8mJq4ECBYQ0B7sUDQGmcmqHnbKIBjmvYdTYO20cq7qCmQvPswfiNi8k\nDIwA+Ca0+rQ+HmOXx/lzekTtLxGZumlpPp/RnZifX28CjChHbRO3/4/ytg3U\nCsvJ0a/NxDI/dRk9KWiheDCMh/IxbuCYS+KD8XjG9n9HHzDVVTvM1cF6+i1m\nM622057Qq0M0EEZVswDE/+MCYyqVER+5ZicVJluSfA1KQGc/F7pFIdWpaASP\nZ0mKUbRms02Ch8H90ou9eY08XWYUzIw2m9EsvuuUFQ/pekmSXHApEAQqWWtd\nDW8W\r\n=zHIP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhB0d26SRiIGWSJ1vM4VbN4bhE6HE7fx9UFi0mgHwweAiEA9tSk/tz5cY97zZY5mAegttlfqjWEyDg/FnZEQyTbU8g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.5fe61f4e.0_1590102472975_0.5844169769992598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","@material/mwc-tab-indicator":"0.16.0-canary.17d33745.0","@material/tab":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9brJy89vSpS9J56m3BeIrBmVOeBZ4MfpYvE/uelBSLCjxFROzpS1ZN0zr3xR6ULnUDdjH65GnJxL90Rso8SH6g==","shasum":"207be88fc1026f4ca28e7c3ff5f6e072dda5fcc5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBMCRA9TVsSAnZWagAAoVQP/3tGE6zFsjey808an4as\ny+YoJt/9CiyJYhuXOZnD33+5HzPy2aJ7+P8facJsfxBkC7kS3DnbHBadBDew\nxMOD2hBQQ9281wUHlzLoXAO3qolCNQ6n/oeHZXhZafiEMf/ZcDnf12BRPuIu\nLh0imHS8zHrWaL+9SQa/rT2Oh0ahI8k42gCaeBo6uNPGb84jARJI6n+05JDl\nxSEbvSJoeyiv6sn0d/DvLJHKYeLYEMq3w8C0tHW7C9MmMNC4WEnX1ffYhZTW\nslGN4JBWv3ZcmmxruQS4Qa6BMdafC/R2ClpV+LW0njo7FtN4LJ2F5y314hI3\nYUmHNvQBPWa/iK//VwTSL1f+WC7RV9gXfK/3wGkWPIw1mkCvsCjdBtF38SyG\nPchCmD1wrPNlGqbecTkkiTHrz8xfwuyHKcmoaYrFZrpu4KRpRRoAnZvOyhTC\ndh96RDSRL3EKUKgEw9J1NLRpksn79a+IsVKEKAYBw9BxhZPXMzcIo9eJCTmz\nnCEE1sFvnWYj023VwiCCAB6D9skICjmaasyMekLQnGuawjQ+qvZWvlbI1GCv\nSlIs/gcnvY5tN7klryidnQiI7Zv+ecbkgUIBEfoPLPkTHt5a13wJM48Te+mB\naI8HDQUaJA4U1XG88+xYDRxQ3G87+NessbMsT39NxoZmXP8Y+9U9+nKEfsNc\nPSYq\r\n=4nPw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxttcmUqNjtKI2JCXdX2GYnYAXhHemxsZ0La2U+f8V/AiEA2QSnCFXDa7Y8ckjBQMMxWgrWCtu8fGMLtUSNLV41Y5s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.17d33745.0_1590509643356_0.45837245685804984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","@material/mwc-tab-indicator":"0.16.0-canary.e8b52f5b.0","@material/tab":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y1yL8cpi+nnak5ob6Sm2vLRi93SZorCIoUc5KRqJJvplJkxGfXETiwS5WFfE9+PZL26FeTCGmMaMVQDzBaha9w==","shasum":"08f86091e95574ddae28b1006034e7e24d583bfb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWM2CRA9TVsSAnZWagAAUgwP/1W+4neNEbdzb6RTF2hT\nAOv+IoSRGYe8fTOMSy9Vp1q9goLaJ0m2PA3YqZdfUcnQDF6aVQGOyiDvbTYF\ncuo+QhBmIQh5WsFyiULtOToPTcvfNU4IZTY0qlsG6xek3HTlh3cjIlmLFvjo\nNOPE9RoA1xdOkpt2PuW1KBMGkpa5bekUzzcAXAp03lG15JcF1oa5onmjln9G\niSU6TUTZGjNYKnN+9UT7+ib/r/JzHAWS1hwQCEPTppNF0Inaxp1Vh1w6jxeu\nK5dR/kL7lEZCiT+QDW5z4A0sbiNqL80zGWdm6EAVljeAQ6cmD95PABASapvk\naNqTU0AOM9kK7dfaHGTcDY5PQBtsu4m1boQgyGcqll9D/IK2Vvaj1Adys9EE\n6nW+wCZ60n+/XxDxstZOQfCY+PVW6Af9d/oG9WWaP8L1ijdiXvUOFrH/gKdP\nGDVduSxXMX6VVNAG31fORozp5cS+JV2C9+xs8llTS3guEsxShDXcwkXnP+ps\ncU1YwYkeTsU3nrQHLAYzOrUO4dUu+fHcWMlVcJu8De1Tcet4iu2iEIKJfs1K\nLvqUgpnPL/Ngbt7nJ3ejMPlEcCa+EE42dIQTco1jgnG1gFE4YJWYb20IPumh\noVDvdtDUaYuXkRXJ8ngECE6eqXvzTy/r17FljJHKVrdNtpCpxJzus7cSHnx+\nbQIC\r\n=A7C9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtWW5aIEtlEPAqOdM4jMioU8gSDcErfkEo+dCPAjSb3gIgBDgxY4hUBVvul9IVqnITM236Ny6XU7ca/w38/bR8iaM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.e8b52f5b.0_1590518582513_0.8761676821181328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","@material/mwc-tab-indicator":"0.16.0-canary.09afa0a9.0","@material/tab":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RuNhPxaYELT7BtVm61BoL3LTVjSqe4APqvHKPLYEgzd8oz35TlUYVr5G1DQLRBp7WguJy4Fu91Df6X9Keb1Rbg==","shasum":"546f1d5a154c80c2fd2b519a8bbb2f80ed46eaa6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY20CRA9TVsSAnZWagAAYVsQAIS8NEqjZji0aikX0gs2\nN7ZyHqQB1vFe6qJVSMgs68vRjdGJKZMDHac8Sef6H/7h0Qfjg+TO06QWjhkD\ntqLa6BxYUn4ByMefZFWBvjCXBfQG3wyqyozr7tp8Og4sjkR3z7yJ8qvYHikG\ndjZpNBGH/AEZksU8FjBTEk9H1gLR7VI2xqbiuGyK1keuZqPZrRVw58DTXCIm\nYXkZ73DAuT4PdlmgJMHsuy/GT7zvpcivF0fuNFt8IRKk8OOG9f9WirvcAmSP\ns/cawZZMcIzUNBr/P//Q78s6Wlzvjca+yHVDZisnfF07cAteojmVEA5ncndN\nBNXZykGhSnnraGTsZN/7bsSPVQQkCZLQqGdrjtjmxN/hrMbanj/+w8Jl73Jo\n2+DV/g0kksBCYk7J/ybkFFug1YLkGHOtSW/erXUgzlpUqINfpEbXrmDP7HgL\ntqXX/HQNWAVlglZqWWQkECyUZjamqZLiiSJvRqWuHkz23bmpZ85rcblDylaK\n1HxzqgeanfDHl50bn1o0nJrxgNDQt0WG9N/XmTW1NLZ7dw1aCG3nO7SAFBui\nBWfTvC0aDxGjC67MJgt8vgnQMQSMdn6Cz47p6V11dKoCIaKebm4l3ULpEhd9\n0mfyvZLECcTN1E2todRH1d9naIKa3XZILsuLQcwAiOfJAwpj4H8PBmv6ahcP\n7pdB\r\n=h//V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG39bUgvTof08W61OSyDFGYT/IPdvcFbUW8/5smMINEuAiB5qouLsUE4m6WQMT3FBqok8jawQQZqnMArdngSw11Q1g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.09afa0a9.0_1590529460364_0.9090649589133699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","@material/mwc-tab-indicator":"0.16.0-canary.58bc9166.0","@material/tab":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-border-radius` | `0px` | Tab's border radius (does not clip indicator).\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lbPDjY6fcaq0VdYTE6qrnG4QEkTEUZTCoc9PuJc8rHY8vjUpxWYpe2KI0/Wx/BrGeohBfwmzPuEtfe0SqbUxNg==","shasum":"98191bb0ddcbaa37228df89652a422bda9e4ff7d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":70850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSoCRA9TVsSAnZWagAAr7oP/10bx/yI8m2yCVkYerBY\nYrijiFMD+rJ4s4V4uD1T22o7SueJSrG7oK8iro8pvjkqGSBYNLqYEzQFWfTR\nwdAll3Bj7OE04IaPNoVLFHRHbVqlATfrNNVpKzvomFEvjrohZEBvQtRDyM+j\nbvmu8rrxbvX34msC+uIxCwugCXlC1fVUf4cs9McXWSmZbHfBwFKqhCRB3ozE\nV2yFmvG3VllFKU/lScZHlNF5S2w+y7b/ti6jYJ3I6cQJGwyJIj1WNT6UIdl/\nQ4qRi5bbVcUbclSOL7csvlJTmAmkwlMcJduyIiiBeuZOIyQOYRGBMVgPpRf0\nYuGhsqfqSy+k+aznCexvrzsxoCn+0230aFoUpt0EkTR0YLOMsRQTUDRtjXG0\nZ18AyJwNCSKNRUeNJJlESvLVgZX2l1wdAcdgGtQkgy0qsJyqhkvLVyC/E/gS\n/Qm9irI26dz5Z63TQKJnxj7jwMz8JRwdMrziu2RACbI2OMlIeSmsj9k8Wdb7\nEK6DE9S0mLvThDCxGiiGDPWLPFciPltFk/01/dYeXlwFouyXHFw9W8R/9lxU\nVqLFK3mX/yMW2arR6isqxpJugSaqoYhn6yiA3LQtLufoWVEc8TZQb6z4++IP\nCMPiGqB+ANM9cMLsMkcOjI3avmuZ/g/T61lHwHZfWkFJXbUfZTD98xtVwfIz\nPJJH\r\n=gADR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK6Z0s0mr32xX8+5oaudbH2hUgmjO6AOtJUS9sXuFh7QIhAOSQk1XLWNxh9vlcriP+NpRjPaYKDR822hM47tgB2XU8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.58bc9166.0_1590539432488_0.25254830827715646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","@material/mwc-tab-indicator":"0.16.0-canary.43bde144.0","@material/tab":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CXebt5mxWl0QonbadDfJltn7Kr0blZNo4q3WWd/kUuQbCyTPVvulVTRPXvDoO3szHxu0eASsLI7ZWrEQLfo6VQ==","shasum":"538b6ab96126460e2f62381e4bd5b1b9310963c8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGHCRA9TVsSAnZWagAAKSwP/1YLPXo7t2c3o6FwjfLH\nIOpxz5/22MeI6J51kJ5YB8135Hh5LEpUmtaJ/FmSSNdu4DlF0NhJnvMP37mD\nR8+fQqs76sm8BI1UNgtVWA8G+VFrGw+bEe1LaT+qNTUDTDgZoxDVKwSnmtD9\nvEBJQcHV2vgaSab8eMPuPohyAG7vJyHYoZnWtgRD9hGFFhu1xDyIK02WJOSs\nkphaAaxV+D2JFmowSrk0q7LhGNzysko3ukSeQXXayEKa5xg9QN1lqiNNtD5j\nzGMDzLtO1/cvcn3n5MRdB9YnQZj8mIDhcbOlVST4AfsJ7t2lMibusF1QMedg\nRYOuSFYds9RoEAT9Domqp6sJx1zje2Tosxmi/Ir2XfgY1JNNSeHdbAuCw57+\n8MODi/G+Ad02IWhsWCVlL31CMCOT5I3I4R3aPUD5af46b6z0WEipfXxF2R/D\nmPr3SVNu1Sx7w+OX3DSVv2FvRzrBxbT2nGYnS0aiw5ZiQZ+YS0ddh+Owh+rO\nw4c+ZpDa+9SBICgku0KkohgkAu07c5JN8i8dkxU3HB9EJeoiOYEhryJ7UAYX\nur89wQaH/wsYFMMomT2kmA/Difq+iiDUWLaatMUfjKrXSgtSlP1D0nMCR89Z\nrxGLr5QNWGkYFIVwCd41ntqfuHa6gDD0n4xnyTyKo1MNvy/26snpiIhRrZjz\nyDUe\r\n=r83X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMon0wF7yx/LGMpk2z6xfSmKepbtSVTQ+i0V28vIow0QIhAJCNj0exO/IcWNo5loHE1vFjb5+SuTp3b2O1614z8U3S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.43bde144.0_1590604167023_0.12517829484666354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","@material/mwc-tab-indicator":"0.16.0-canary.51067bbc.0","@material/tab":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iz+xJFedTqrxsYgmTcNfDCJl414ShFSdYCknqyduGV+GYMgm67zoWRl23LE6hhONlaipElrtzS98WTUADv/q4A==","shasum":"863d528e5e6a16601e6fff43d69b9af3dce5c5cf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseMCRA9TVsSAnZWagAAy0cP/1vG0GHN1u1rp7oc9tcO\nSyWakRvXyDj+IYxb9W5kSiR1cdT6pDTeDhVNWqjnu92EBg/j3RpegLYLXHU9\nrtElc+wwvO7yuY/CVVUQe35TN+lnsLEPYhPGU3sK8rN9NClm5CAIoATjNNHt\nnx2WnDwL7PmIhhi+Tu1ipUOy7/k8prCuAxrXdEJ3Qy0AldoRBJvUkmyl0wHi\npU3Z4GWy4GFA3bWWOoQY/N+u3pnTMxzb6Zn8SON/jzDyyXSdBC7FLMTAe181\noqgw9m2yM58C0JdSf3WwUHk13jSgy3ptq8+ARXQaF3E2wEI4R+dcLaJWTdIi\n6qbesYeHxj7jWwtuYNpTIVkgerrCbFI2mScfeYz9oE31kGcmW4eAv3prXbx6\nqWlxkOCSboHPbN6aCTu5zo9ycjFKSYUPwhntBmkDMhHzoe/BCPksohFQNLLK\nDM23zuB9ZkUtRf0CGiNk3Pnt451BkCYMFZ+Bv9YeWfI/b5fCvyp9R52fsIxp\nW/q549buLaOEkJBwiu0VhYVWWzXsnv17/TjE4kikVqwy+srw6B6PUPilTgeQ\nqqwzQeRTCXyACOc9auLN/VES8NdRWEjcML95ZJl4nVY3LGQFygvp2U1D22Cl\nP+D5eDZtpFexszlplRl6MNIXyoBWlG7rfMErq5DQt5dpYrle9vJjZGHSPUQo\nUhUz\r\n=/r9D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1/MxQBl+GS5xCPTYdP+gR54pRROpd8Y3FeQKVi6cfSAiABK26HstUJSIXbKA6xHOBP2mezf9mbF1xmn2lVYaT77Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.51067bbc.0_1590609804218_0.03091894815965568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","@material/mwc-tab-indicator":"0.16.0-canary.92751ffa.0","@material/tab":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gKMOdzCF94VFzeZzjL+39rgtzQmn7H2W/BVwuqhSnkE8Qndi5H8dXJ4H0JTxypxW5vyDKh8wExvbwMknbwBw0A==","shasum":"b519171d1663953b5e6736550f2fa3e4368092fe","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1rCRA9TVsSAnZWagAAIa0P/RMSoDytYdkZfx3lcvGj\nVn1VVdalTz0YG+AawUcE/zbiFxaqpZ+BSMMNfYFiCTIspHLY/zgp/IZzV54Z\npvLFIIEsPAjNehJOddVm3Ak5m+HkhQtIIIgUkAMjiGyO1xkL9FjGl1YkCX4C\n2ShuhW+z/+sPx1g5cplim5U5siK3WcwZ/K+eoG6y2lAcbmJ3jWO7hB3NWynM\nWutVkrBiLEzuSFCR9w3sI0demlLXKNNrQzelv0A1eK3IBqBlGG92yorWkI/x\nLve7mxd4BaGBICJnxrfBV/goccOhxJU7/YbgSryTevBskDY2RLKXgvmrWZf/\nZfhp1CBynhRRYuevYm+3LoDpWLOHprEdtjB3w2ALEj++ttaIj2mpWxos5P/U\nJo2axfzmJJ5aijnHmWFGd53Yr1IbFuhoCXFKDsvDoXm0au8TTx91nDcolNM1\nZP6wMrATNA33fT2ES2StmULBw/gYUt0vs72RBvH6GQfCThlUtHPSyr37cEds\nqzkdGpf9oMjFooQmIRRFRPy9allBhnUOb39AitU3M17KEwrvJQqNrui8/ab9\n76mpv9VHclwjf1d/OTfOhJ4425lh+qpcLpawv+RLYlwa3mCiQ9gnFkZHScpi\nf7UrNeb9ckoQon2oQ9x2p4aHY8xAN6Z0v42mnK2HlZLYe6Amudvag4usdigk\nGNTq\r\n=AIHo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtySlPjkfUHrqVQKJAI8dB9W5fy6c0o5UKlMJFqMMjFwIgVfKU2cq5NvPk48kIskXJZpi+S4Gaw9vlTHoou8Qm6dE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.92751ffa.0_1590615403114_0.9978112649392279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","@material/mwc-tab-indicator":"0.16.0-canary.aa2b40bb.0","@material/tab":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JoPIzUPxitic9wTWTf4YZrduDEhWF76mz1SlMqZOy6kBfRUzoatYoW2vlAovwhMdHgvrWYfG4UsXHKSABFd4Ew==","shasum":"d5f84be4c25bad6baf65853035b2a83f50fd5002","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3CCRA9TVsSAnZWagAAJ6QP/0TUzCno3l9owgsNNRvX\ngDPTjlE+TwtQIrXPvvIhiLPYT6O938B57zb2rw5rNkbu/8Mn5M/hCL6B4/3Q\nNSc9arZe4rtcsAApYrlVrwZg1JHyDNVMjeY0tNJ0TZe5/SrfR4iE5nZGqrX0\nWzQmxPcjky690T2+85yTZQ8RT8tYum7C19z5PrkX2HVNoQyjdh+pK/5jKrSL\na7zdSqK3osijCJ9JA38TZf/SvPyD+p4Yzmka+6sVEPtjTMHJtHQVfUFvjYKE\nuoe4ncdeKX75mN0LS7QQIeHKyqAybYS2yKQqwilzJqXd6q9QvFmlJGq6J2y7\nTUa7CPf4lRFWmKfdTx5bD3njKHQwOlAwFc7RgNSiBMznnfPBOwFMGiSWBZhR\nZL8xOuZVMzqW6PfBvSBWL3pySWO/GZqQJLclRt8MyNPoB+WPgdkTLqZo+/sm\nSSy3D9vVtQt2EFT3PVAsUPmJhXRlWX4EDXGULtexZZRJEwLFGNPXLJUUC0P9\ncEkIIfx2auTNCb0b/WGBOsVjBafC8th3uqtK8DKaE9rUeoSTgnU/vfYClRe6\nYJOncGnv3jYzb7aJWbqxXpgfKInzOxy0I1pTQaQWNuJpqAv7quAz2+atJ0+A\nJiV6FP7iw6phhbWxRHgWNXQ0Ccz7V1rcm4AP89gDmqeMvvEd1po5rPRMuSMm\nQ9oC\r\n=qk5A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/C9vhvaZSBbmFZBXh2x94zrEr16XeihEAQIZquT2LcAiEA00NeTX00QKRrkL4LIo95hkTAJ4GvgNUEwH27jOBEgvA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.aa2b40bb.0_1590693314417_0.6068173472162197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","@material/mwc-tab-indicator":"0.16.0-canary.1a870a01.0","@material/tab":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GtqtT4uxORdAM+cK7Wa1B4MVnObSnDec45o5cL1cveK2rgXzVqyqahrEQJqrV9R7RusqHkwWLmjpKomkLPOFmg==","shasum":"79a964c026c7aad5535406318b3c31afa053d5ac","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Cq6CRA9TVsSAnZWagAAn6YP/i1SwF7nUgZosiX5Eyrc\n8oCiAVjAe1B2FUp8cIZP+CpzKkTlDkUZ2qMCda2uTBx1//vlv9Nmxv0mv0oW\nOfF0cZvDklzl2Zjb/SLTYD+9SIGdISA5C9GY12vdafEKUHIkF6wvtKof90u9\nG3wY/e7seyB7ETb3pF1WOJ5joZT5kZ+6N04+HmqUdZtdo5GTCSCprEYeAxy7\n6unARrqAg9W0o/9TYewNoxo2vqHmisyq+Tpux29WIZFsI/Rrqvorsy/viZGi\nBcJAJYzvvY8S5fnFK/WxzLfaAPr0a6UzpE5ihWNmxDfOB3+MR5B2lCEWRDf8\nC0Jjxnfg7Pdl6esOIK6FqnBsQUezKSnrzPy07xOKbCgEkSG9MEk+4OU36FAG\nA46aC9+qAUJY8I9rUUrzVql05LZfbs4IVvNq4XuHzGptKJCge5Rayv5GHUQQ\n/by4u3FBAfJ0HbLO6zenomDsl5+Q+Hx5aven/ZEAKl0ibUm5w0y6jTX4EKGW\n1Xsczmsh6mlVgjIPS60guEWcbj6UR4QeFrw2Rt4XhBbLlb1yel9TBVkx6llz\nwKfZbBlnVvOIwczdADHJBR3enBf16O5zJdaAT/y4dY511OHr6IpNvSXbkFtf\nxB9zjqE6qEwMoOLO++8vVE4nsu5h6JaNAxrvHJN/CTRhlPl5wDiWUQ9856RE\nEP8f\r\n=vKg2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+rFjgI5TVm0+N3R9i3GRVRkznWAfAlal65yVrGGID+AiEAyGYLuSW43eAiwb/5zVsDqDYaGGx25t7dweTRhmeo2cU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.1a870a01.0_1590700729737_0.9030575592481143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","@material/mwc-tab-indicator":"0.16.0-canary.ad57d086.0","@material/tab":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jQ3l4hSNOMyAvxTxdTTq8PttpBxLdKCcnUdiu1eWkMbH1+NcX2vHgBemNer5/wsumJEzEdzjkvDoO9kRqbP1AQ==","shasum":"7bae8a47ca6b910b96b115b911de83fe22f769a7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":70411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+CCRA9TVsSAnZWagAAWgkQAJxYR6UipM3iWFW+BeJA\nCa9D7NeNB12GM43JwHzHrU1gnVZSHzeb+ffQCQcFZvsw5Zke0xVkDcHcfY6g\nbLjjdFroY2xJoiRBjpNcNc60nWksGuNAQDsZYa48FYZ5jAzLa4vZX5V3ynab\nCswyZFw4tBH0qXGmteVoZbHIc0fQDynDPBRKYtNxFnuPJ9/ceKWruKd2bct3\nq3yQVwOELVIMBAIBpzhTH44iuHE0J38v5vYOo5cIDE9UkNJZ5f1kIQdZFhJE\nsZ35WYFbaQa3g+MkoUHtMDu2oKk2KhnusvxEHo1UsJc2eFvUp/JQG8fCkMJg\n6VnC5BXyw6Rpg7UGmUVIG3iJcAXzDlBPe52pKPTbGHG2+7+j3Ybt0/pOtPOl\nCzwt+HAys153d1ujoIRbqADi87/K5C2+1MuDt7tyZB0UE1lKH2xq52mP03R7\n3C0txoXnkC+x836e4lWb1uEr0ne+e8Y2PN+5eDjexYl2Bazi13BwFD2oiEGA\n6XGrEHQ91uKv2j60yKoBg+NBZNm2dBd7kAbzzGXVFf4EnpSlJ8O3xhnO2+lL\ndWKZhtBff7dc/Cqniekt0DWdcHy8+U81tChswuTmSIHMLEdnLdmVJFVTTgmA\nattGT2Z12O5AiGRm8aeF4nsDS1wRADvfVXH3WSLD7gg5eF0gGIhIjgMf5h2v\nrAcD\r\n=IDZK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVMdNycmH5V3rN+eTzLbF41DrMApzTni08LT4g/sw7GAIhAJmvU6afKbgrWMZDcunk0JKEu4cury/NeGYXppxaNqdn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.ad57d086.0_1590796162232_0.6262681808435315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","@material/mwc-tab-indicator":"0.16.0-canary.3bf2b4d5.0","@material/tab":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-16gmjHqD/fQgRyFi/ZTENuAfzR1QdepeCNE42Zir3x+MTOx+VgJtKY6/ZaClE49Axpsj8hO6rjF1MtZwym9nmQ==","shasum":"33d7b449ac871be17fc0e4691bbe91dfd38aefa9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":70417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqlCRA9TVsSAnZWagAAM0gP/2gGRlBDDbPWq0EjwzPK\n82RaIHAUKvvHn0LKD2khWOy5STkA6nJMll9fJtkoNfRtfrBQDi3gyp2Gbvzv\n/xhHrGiIKLozTTLiGXh+gEaTZ8uYCYYvtwv+APA/q5t94vAOLtj8oO/xv3Wt\nOpTDOcVy1LnHh/dgPQbmQ3P38Rx/tXdI/ZNsWXAKOMa9uyTlda7Jsybph8Ol\noSaFAoRUVoWXhvXEawyMLqceNe3SbrYZTjfvGKgNPRfA1/c9SzfxfkDzB4gJ\nHBrlD85YJyNNQVg797M0pMMZW8f71liMgzX7paiiUetZMh6b5poim5V37vKy\n82QK97JqUxhm7aRaqloaYiQNvBWrckvter20orFxfqWNpu8jYJZXHJVuj/F2\nC8aCCwRWvgXspgVsKe0ayQa4MFxPtP5Kk3thty6jWvoAv01itU+s8XZc6IVS\nkPZXQKkOxi/aCNlA6Vk3T3HbTQdJx7jNk11CmMcl8AUpPUNQip+HAnt1Bb9Q\nePJuwkdCtm2IacTpvDoknLMCjvd0E9+L3eZqYYrE8mOLVXQWGV57QNr0VMzP\nRR5IqWvX72rE3DNXjuuxvnxVJ67QXApeY/HhvHLbIFN23K7rVx2AkkOZgBfd\nkllr9JUw/KGw1C9JOXx9sTNc6bBn1k44vThQ/SiQDRi5p7UiJkCRrhJl4Bnb\nPa0m\r\n=wEFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC251JMtK9VrQDo3U48w+tUzMY7aZBh4qPNGEZViq6spQIhAKwGFKIw2LEvoWeg+KQNj5hc9HV0cS+DrurXirin9a6R"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.3bf2b4d5.0_1590799012631_0.6029542809352288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","@material/mwc-tab-indicator":"0.16.0-canary.ac05f090.0","@material/tab":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1bIwGnebVoF28lOIGqNafbcOVZbhhIZ4Pl9UVgPNA/+CQIbxWdkZGF/wKLlovnhHt2VNF2s0fZiDwALBx7yIbg==","shasum":"7f1751ccd7f02332627cf84f1fce06305f0e9624","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":70417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnYCRA9TVsSAnZWagAAfp0QAIfIc8HwADxcstKHMoU9\nWgqCfMHp0aN3Nc+EwBQ4jpR3OkylR2UoPYvRQBmdXWFi6UDpmkT9zrDtpe/7\nvuJQIY4Vrd23yJrQDbX7AdTlrCvy2q3mzW6yHGAYEqBQdZ7G6cojLv3Day0w\nUumoB06jVLLMeWLue2sPG38QHRb4xFRixoR9e69eoKHygM2AjyP51jsjZKjW\nahyFMxbHuk5r/bVVeobt1cSyPIjGaX6toAXHahYV+GdOem9rVKzAYiaqF1J7\n2sTzEk1oCoXdZCPr5HtpWCmSCgz9iBFt+N8Gc7SLBFWiizd3ZTj4mEv5fqab\nT1Ut7s7tcnCfjT1REm6SQ8ddMIxYpXfb2Nnon7Lrm8Hhn+23MR4eSrUkPmBh\nhKQJ+euycnlIrAWx3QmdQhixQHRSJsiCNcSoChgtLQdAQTktNrRBXBuYMbF1\noKA8jNzW+RO0A3rgIvnZr8PagvgwC/zr7lba2ac3iK/GnsSkzWtpeTjpbnI2\nPu5EVE+NkXaaevdG0c4uXzcgDbL1MPh8vU+QV4YjMJNGpwGBujciv5+E/CgY\nQn+4Yggigy/7P7gBhbJe5DoJd+KQbkb7HGHOhu0XgdYwVx2MWgPRBTP7ICe4\nuzXZpa/SqWBQ15QEg5LYAu0zJQ+Paw/sWl2IUONkhYKSqY5cG0Nuha5wUb3c\nAvFr\r\n=tU5t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRKl/FZot9Wv+2wSWOKQJHDEDnf+58S7xLNEyEsBvRvQIgPKX5E2oVLMhQMl4AOqBV7TnRSmXDjV4+chnowl61zA4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.ac05f090.0_1590807000507_0.4215112415826694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","@material/mwc-tab-indicator":"0.16.0-canary.0ba7b095.0","@material/tab":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FWupFkdkDWxJmWwRfHhdt6W21l40Vh6O9/4s2y8/TPSEFQeiP0y5Kw8Sd7qC/FaVv0yB2eDuF2y9sqmigQOYfw==","shasum":"5bfb26c838bb80783ebb378ccb46d11e3ab02c8f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":70417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctpCRA9TVsSAnZWagAA1L8P/jfiKsrMEbBLWNnKjYCC\nKRF3BlprXeq81+VOrrh5W0HPiMfwGiNd2+fUqQbvISnbE/J7tyN1Y/RuakFv\no/rttUWCkk8cNlDDO3Cxj0lRBBs6q7O2eGjsAOoblsVLVo30M/07zYJtgkxC\nkBZi84gWcITanTvpmXmvXSoSOz/qy+FlXQEKiXey2QOVNFxVSs86Bbct+3As\nV9jNxdjP4KxicwfkYcTPnWvo7u97qzdFcZuemxm8/VtR/BEkROByxb53i8fa\nA0lAjPJ0PNiKxL7dBWR2X0kQLSlo9VzQ6X+xIKQzOXI/CgQUTvvLPBNRTdem\n+eNjn08rLaPFb4CQaBSuwdYCVe1kauLm9krZuci3gRaCblqNbvzdgFJ7Vjia\nFjHd4nU9snJq60R5Zq2qeGmnLk0ZBGTCLZNLhXZZ1tZsngGTCzRm+xbrOJCn\nPu+tgyT7iekVOdNI/v0f1pcP/y/JttTC6/bLUGPqCTfxy4TNWJF6hTuw1NYw\nogsvjE1xin8ilAkXwEbx8FPL94NSvKafA9GvZ7DU3UfHHxZz3HFjx2JxhKDU\ngitykKsg7e+ztJtMNKvL2gV0gJX9Ietbc+gwKJAx/q2XngvaFId1xVr4CXLW\nEOmPM9sEMXULYvifnT3Myr9grgMC6IiOLedEdO+OWvpCZtbiy9kjVr/7A74a\nKflS\r\n=SIcm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBR3iBRu6ZSYQtWWnVRUI4Cmzm0l9EZJT01OTehOaJo0AiB7qcrVu+3SAdWjQklS4FoGznVmQ7/L+i0hkc2u0gVXTg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.0ba7b095.0_1590807400953_0.20354594001552662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-tab","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-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"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-icon":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","@material/mwc-tab-indicator":"0.16.0-canary.5eaa9bac.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qNsyQVSKk5d42jDasss4fzXofWBa4EmWfvSe+Rqd0HepXBNgKEyXrnvp/+NUVGN34npFofFXczwABnHbwSmLFw==","shasum":"6c50b36e013e8f73d6b38067df34069f610e738d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":70417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8/CRA9TVsSAnZWagAAEeAP/2aDRS0CczmMnZVZ5VW9\noWUaDrLkEhPz6xhChgPnP8YnRXYSdEC+Nv/4wBN0Mn+LKlyPx695KG1Nlpt3\nLlo0bE9DUYNeaPXoTDtByMgEEXgwK9ZRDtOskidRhRsZtMIyCrGu9ucHXac4\n8kU5w7obDZ60d/eP6Ok2ImYzFrAxR8cnJjWwG4Vh5Pof7dTJ62qaLvQ701NJ\nuNY96gB2B4fTOqUv+CHcE1bpAPIkw403qrUmzdVPcCfoysLlmt5g+BVS8PH0\n1KuNNWT41EjCjkLSApJd/ez5VPDgZX2N8jjCfWqEucc8GaGRVsciquvIh1Q8\n+Nn8QMARfxH5LvJkRPXJrpUlfy2Ab4wm3erlKZlFFaqV0UYhRp/9smFGmlfm\nlQTd7/be50UnM18Gf1hn4ciKTX9z1D6Yrqvn6LK4XJuMW3PEux/ng1M5F714\n35Z5clAkkJmXe5hACDL4Cs4U7PUdBgWpL/ddRSDv4rTK8UCNCARjcWx8EoX/\nj0uzMQ/GAQ8bvIfSCM/FqUZj+uBvp7dyFmPSWCBB4W4dvXYrxdu/bohdjgs6\nT+HTSVz0gWloqK18I8U534LIIZz6338C/92jJWZvlIfshSYHLeDPM/F3Edsi\nnrJ7GJN2nutxBF0gZLNxiGbYFCe1WCxOTHuXoJ+IF8ZaKggJ9A4oQPA+OCyH\nWiOM\r\n=PmOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNT8IWtc7IaxhrTNSCup8LcUxEYosznjzqP7ZTCZqu9AiEA3eesCbAz23PvEuFb7u/eMFmmHMPsLW884+8P0JeeXrs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.5eaa9bac.0_1591054143386_0.9678050697776444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.5677ac20.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","@material/mwc-tab-indicator":"0.16.0-canary.5677ac20.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.5677ac20.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HBx0ib8yybZ+9wExj0bb5YUyN77SRp8nbkp/OQjOT429n6UQFiwp8UP/RRkaTEsqj0tkB9PAFq2QMshNmSzPjQ==","shasum":"3c98a9a93fb4e26a67465e9f560aac021270bd12","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXoCRA9TVsSAnZWagAAYucP/Roy+/SKOLqDFOIB9j5S\nVT9s57q5Z2y2J3qKs6QOdSLfkTIUAHPWXrzcoYKRPJX2/+mjir+hSu7NlwC1\n6T24KbOjfDcuduwHNgRGbzLDsu0+fbpQ3RBcdqWd2i+1baFvnseWXVZ8xyLQ\npgc5xtfrHlKR9X5OrjLj9AQvlg7M0K8BlejqP4Ib0Cazbp6Akhu/Crnj7hT2\noPKAmr4LMeYe0jKZb/Zjczx+xImHPJDEHsKZRzc664IFCcA00p2uq5AR6SsW\nOUaeD+NHIMdxCeuOUYf/uCUNUX5YI+bdFw9Bg51gZOlb115benQyZBHUv1/X\ngFrojV/bqZzQqY9BSxR67cNFlLAFH47WB4MYWTEEwi2OelY6Id7aHtmkGBXA\n7tEIYv9ly5KOx24yxXl+vsatlYmRXrGumCZFqeTkXgs2YbIkhu5xGziLVj3O\nEWCMxnvxwS4HvocOKUjlTOREo7hcQ6r7T8EmlDX6wIsFYZxvR97QldPklEm6\nh4w1bIRDiNaft+hVXVNXTGiJItILdtfYqVUqRz0P2bt8h84NdjQCc545LTnV\n6+AJkFyP0Ia8QgjbtHUe3PHdeQL1UiYP3Uu3kQKYXm6HvdEBH55BxDzEwMcq\nxtS3KStvyrWIn0tz+MdbS4KhKNZtF7Aa0xJtxtR59eAnf7BJTA+V7jz0vv6l\nG7Up\r\n=oE/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKaB8hgeicWUcyO0xiidt9qbEOA2PawTgaxNS1Bx8c3AiAzH2CrQ/r64bgH5XrFeVj4JBNAFYmEYhxJtDC/uD1esw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.5677ac20.0_1591055847740_0.3779639776515875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","@material/mwc-tab-indicator":"0.16.0-canary.7ac6bff4.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.7ac6bff4.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j2ava+ZV+JMgclKqGgdrOmsw7LW5D2NcFlKdFAY1lTjYRvcgsinpI2rc/Ee0IsISJtlA2QE3OvgPcQMWmU1oZg==","shasum":"dcb48729b4ea2f3ed16fbe2867cc08759d6aa2d1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Zo3CRA9TVsSAnZWagAA6+wP/RYdStsFsBxlx3yZvSzP\nkdOEZs2X4LA5VCrErzYcNOusEzzgcxqj/CcTNFeapPEyAcW2bX+SJmygxAL+\ncxDymwtth9iPLkXhW8m4fduRSb/J/qfZ8KQD1xYq4yWYqLORpWphLSM6wxkh\nbvlIbCefVBXCvpX+bDGzhv+ddnvGUCMErFqkCRHp6f7y2a+CNM9AgysiiZkc\nB0lEOQemWUJMpFeWQsnPmbjsahlPayiFtVtzNk/wEOUcFFJsYDaoPDX1jPhS\nx1vNnalmU7zhfMgkHKlqzjvRLyWCIvw55TERmnaR5r5WhWrkANJm4mlMGEeN\n/GlmJD3VydtqY+9ovVVX53UfGqGPlvkLUoXT6N/bqC9CueIVrdjwbQNUIj0M\n15TI5j/s7mZywnhwX2j5IL2lwiaNIiZOn39UTZlvcAEUqNnBDT8F8aj1RqER\nIB4gVdAE+XxRP1pLu73+84KAq9Yl/rlK0moBztOdEQs/uREe12T0NQnu20UR\n6uWj9R+A+XL+0RN//so9OmEgg6lMa+B1K+lMDiwuD2L3rrCW0MeeKmKC4uU9\nXf959ymrgCC3V8e+boniZcwYjPNcmDaX2gPe0Hgi5jetK8n9DqPcG1XaQrxA\nqt2CrSR3gKqziFBScakqFOKs2qP9TbCe90vaTsmYZz0ZAJBriBXwKWaO8Oy3\nAq4i\r\n=NFgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4DVUIp61rcWyMFUrXKZCpjvRJsOkzjeM8N+2sc3QqlAIhAInDMolqW7TezbA7CBmi/bT0vfV2wDe3m+7OskI+dCSE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.7ac6bff4.0_1591056950621_0.7232741282966337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.d45622aa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","@material/mwc-tab-indicator":"0.16.0-canary.d45622aa.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.d45622aa.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MCecywljxe0Dwrb1F9eDrUlr43Altpsu3Ltsz6pGOXzGRnQJstZkh+ZyeCHuxqgC8MndVeHxzf2a01DthS2HlQ==","shasum":"46162b331359b0c6e938926ad89ccd7ae41b23a4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uS9CRA9TVsSAnZWagAAYiAQAJuyTvCXjWiKScnFRSTx\nH/NAZ55crlZC90R6Xp/VEp5807WQD6ia4DONSIn2vFSDA/LU0TsHeg442Q10\nOD+X5oqxJXWMyQaXdeYtfK55x5zqL0plg5b/1DHWe0DaocCEFPpfUM6XMU6N\njPWOPY8UlKA6Hr9w3X/Xc94+j9WqHnsL++nzSQp/6kyificOuRqeyVfRG8xA\n417LYF23xzHLhZ2MgoP7hRnDxxeZr08jOzIz2i4H+nUmT1eMGUFePpbdFu24\nHhRPZuAhB0tJMoUgKxVGrZublEAovyF3oanQEhIe40ohScqofwnSfX+Y+C1I\nkBfeTW2nbIA13muIWUEZiwPb8c63fQAp/m7xnaqOY538y+YrQAOWSQB9HeWU\nN4iYtUAYX2Z3kVG68r+0afgazMngwoJXo9pJi/o2aZd06o1SoNP2Hag2T91A\n+LU4Qn0H6iBAV61jeAN6K3KiJ+ko8CNh/pZBJUmmLpzL/Df1IqIUER6EZ/Zc\ng2+OxyxEIkUlspH2Zu9kRBpXAr8Zk4tDLKvTJcAIlfoJ0IRc0wjMLS9bTGFu\nebOg+1ftK6gVOwow1Ru0E2+3z46LeRKemGQ7HFqkWI4o2HhWgtyXCGnfd8hL\n6Sql4gO54MiIbNCPVb9bqUEdPUZNfpJO6krYZwHfff9gtruA2BIlLMLdQEo5\n7HnP\r\n=+GuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9oNUVWbT8Ni7f9mANJU3RQLrquK9m9c67W/uRXy8h/AiEAh9DhnfE/QbQLlg/2MbGxb6lTaA+34r1Wr0QTfpnaGxE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.d45622aa.0_1591141564891_0.926769735354197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.dc26c709.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","@material/mwc-tab-indicator":"0.16.0-canary.dc26c709.0","@material/tab":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.dc26c709.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8zI6GEoWyiiRo+IMF5XogrSlqlqLlR3iBMRGqtrDuQ9WbGsvI1f/6CJFozY8RvKFJyDHdYeZFsQvYQZp45wNEQ==","shasum":"94bb245fd3da1e7c6d313da6022a264c41a0dcf7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qk5CRA9TVsSAnZWagAAJmUP/Axgfzn012ME49XSdAL4\nhmUwojz6wSB4dmPqoEthtzOdnCvk6Ot8IvDu8Pyj8+JZuBOrHqnvEqDbAiAb\nlbxEsteCFgrpA45wQfOiBlLADG81s3NbootKB4/i68G/svy502BqDw4OsTUC\n2ERPj900iPh7nGqKf9cN/6ygwQp2u8t4GJfYmy73ee50nbGeWMVZYbk6Xf3O\nTWfaTFPNwZxHF6eRvr8uYykb4Ul8FkfoTYruBaMRyyQEV/fLaJhTtkrp1ztH\nG0ut/V8bFgFQIis0CTHvJDjAwqplqmeCdk5BY9HvoAVx4hUBkrWXC0ekYuxx\nxXkTg2WnT9lIgI6Oxn9OoUIuaJQimnfYHhWMxOydU3oa+kfpX2HcXWLSnXqk\nMZ32GgcttYrv3waXm3KWmW/EFzgmPs5EsodgULYWj6bQzKj2Fgmale7fA2gq\nIDVA8FNYZ52LQHGr6I1m8rpnOKiH2qBihFlzakI1Drs9Kh068nG81tflTzBK\nOL5EK6PmLceb9MGvQVEeggUAbk7yqX2WZTq9pEpX3QZFke7Bx8jXEXzsmJS/\n3bGAwnd23B/pHUiw0fe2/EyrtXfC88D4CSTRzrfWLIafKTmYH2UqYtCqoJcX\nBHurvCuOwkVjA4qbs8uHoAnmnXz34TUO3RnmzGOCDxgA6NCuwkg4c/HrMlge\nK5JT\r\n=o0jM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoRtBkOL+FzbLkefc3mSeOjRR6vYz6UY78LaOhBggdrAiANyYhUIkvvDQDvRhleP9ydumVkklJo9I603ODBQSTksA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.dc26c709.0_1591388473134_0.6185813801789142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.b9baf6db.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","@material/mwc-tab-indicator":"0.16.0-canary.b9baf6db.0","@material/tab":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.b9baf6db.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hYk+GmjjApeooX7lmDPHgJqzrz5a3ENYM4JWF6T6BjwGydwg0lxYpAIaEFG8fYGSPi1pA783gvj1+7VrgYB59A==","shasum":"36d3fe7aa51f6b75af0071614a38c838532009c5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmOCRA9TVsSAnZWagAAYI4P+QFK0vt1ljgCLL6NPk9X\n7O8pATAxgwMe/L+xJW7GfIh1WuIj8Z9ay1PowxD5/YKuPvGpnxj6Se45X4nh\nyru6XTJjeKFBYNzAMmNzhwEdkpLpXKd87ae2UX+bHANv7bs9qe0/BoEyQiQe\nDwjuMykC/8YG0+5zJEAQpk8oD83cbqX65lQdysrOGGw5KhVmGJm3wpK4uM7+\nXlCgOsHQmx4viW01tuYLyvSh4QRPiRzkDFCnNoopO3qWc896kIIUhBHW+voO\nn0OrJywSr+IaOSy1rebyhaclSPs/Lv77HiJmO4eINQm1flqIpn5SWtn+WZl9\nmS/0cuD0Kg8xGrI5miXwQ/gBrLLh4qenIIDWEUusT8jXDFE3ireyvKMbXI3J\n2SkoQwPFlHG2y4Vu3FRUTbmIpeUELoxy+k60sLe95cHEr0QUNwqH8AdrQpUo\nZKHX22t1qoGDQo4tm0VuGy/6bGVUSxKjMXr4KFhjAV+qQj/ln/XDGwzjpYnU\naJOnU4PeKROGNljhveLKuFpVFcZSLmVK4S4CoCV02kJqavGKvrgNIgvsW+NU\nTSw7T6LAdQXt43wGM+eLn045bfacyUBYUIutgg7DudD6LQJ2D8TMDUcdg61t\naC5JaI9nZBCl3hgOkZXASBIyAsKjzd6oK1ZpcCnZBHYVaX2u5pfVd7lTfQd2\n1CJx\r\n=ZpPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqQmTXlgwnrUbB3ML4YsvW/DSSOVP+qWA7crUNzs7XJAiEAhWPf6qtPu2I3N0TzdOQBKML60h1jDya5Lqeei4RXj7Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.b9baf6db.0_1591388557630_0.6225765965091692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","@material/mwc-tab-indicator":"0.16.0-canary.e0b8c9d0.0","@material/tab":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.e0b8c9d0.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+UOsfeI767gawlfvYaloeUTuc+iIQr9p22vmTydxwjpB3dHtaUlhnY0uqgxxCrwqhGD2qkm1fzDw810m+YhWjA==","shasum":"64889888b2d00ec90f07de4d3b08aa8f08fa6c44","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+jCRA9TVsSAnZWagAA3DUP/2HXnxW/okdMj5X9SoxD\njS7rbXF6I/82RgvH2WwFm8eLsWvVz6PbcZ7Dt9CntxWBq340c9n6C9nuYR1/\n01iEzZeMVP7bLWHzelGE2RsSi6SQ1b9reNu5jilvNyt/xm9y58sCXc3J9gLZ\npGoXaEfstPduZHQzetr9PhjxRYTxubWsGOlYDhoanF4g4EboMZ4M9zXNb8y9\nn8WNFlEB/gGjH6AYaIGuYOeTA5lKP3bW0W943bDLSfGUb57yIL2vJD1zH4Z2\nOAFO2k/ielhg52thk3AbvqTXzpUd4klg3fZoX16y+9WZjFFM+BkaPlruv6hR\nk/a1CR6lW1EvX6jGEkysUsAAtrrGAL4FvpxT/WvoYU4xwxTxAhbt4yaVUPyW\n8Rcrr2F+qholhFmjey/cOWgwmdkGi4h2E85BYaFkaRFnzLETCIBdw+Gesl8o\nT6BGhvDJshWQJPj9Tyj3qeOsK4oDeMnQHILtTSD3pTaTPSzZzGkP+EsaTWMm\n6X1tydvSURKigU0acYRoyk10DTuZf0Y0m2c8K9Z5yG6ki/r3XqmQs6rEFtYF\n9cOdUeTmMY0w8sy7kQmbKtqbzGi80qiu8kHcZQAI0OywyLZCshaJFFTUPEvP\nFvJ0JQywXh7JH4M3cFErpCCI32AZ6cBaQ6SrIRPMBO+sIR8HydRbKRE7dzGY\nhKk6\r\n=u6Mg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHz5rvWL/JVFqrd3+Liu9x4NYfOmFdhNgMRS7s4ocrXPAiEAnNvFrYsZ83C9Z3KTOA2Rjh70qaivNXqtJKR4qI9vZDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.e0b8c9d0.0_1591398307083_0.39165634770819713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.51552859.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","@material/mwc-tab-indicator":"0.16.0-canary.51552859.0","@material/tab":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.51552859.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-winT92i9Kpxjz+BeSfaDDl1lJPqlymuZj4TOfgk4PlRnQoXXkwFMedHYWNEE+PNCSudAE2UadqnWT9jvDx2w0g==","shasum":"5e0c869d3f25d5b7db3dc7ae8e74d9f9c480a4f9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CR0CRA9TVsSAnZWagAAACYP/jFyh/0663UCW7d6zbgq\nLJTzJBNrKRYGxe+q/DhfO9ee5Twyferr4oQ+MrXLtwW/+uIykrVXacxkzo74\nTNpUHnxcRfw2iZr5HRMsSDzX+Mm0rEREUChb163D4vuGJC3AaclRYkq1UIFB\npza2iX66F1iF/Ppwc/+yN9/clTomrARDEKhhtoubCbpUFfgJRqsv2BNHbX9x\ndSqvFSiR7qTnDnkaqtbBGvrDOg8o+WOO9Jkw61Yo4Va6kkPc3xjaS+46BhDd\nCO8irZTxpRUbmaXOmPW5CmzVYex+8pk0gHD887sGoUDY0SW/pMmZ1ToZVtzw\nLCTq0M3EntgAhqMQ9tGaQMsC5tesiUFEEGeZHSn1tcWlGTF7JHcXDOzNI00Z\ng+QrQQjpkDNx6m9jUu0vzPj0jfiXS1WlTDowAttUd3z059Ly+bD3a3ATHGn1\n/8+parOAnxh6bNtOQnZjfjJGHYwXPiWvaqbmNitDVQeeLxA4BhpCDDrRclMX\nYm4E4zQ8TyLJNhk8p2do23AYYmSQfQR8P9kt+CLu4t56gl61AlOHIp/yGWDq\nBCLZhbMqD/glVLE0Wm4GzKlfERBa+rgt0grUarFOGBAQG0wclZ797A/AWB0+\nRfwg2tg3EFJmXS0oKZHnna9txLo3rEj9gfKEK/AdjiGIn4NGm26W41wGcaZ8\nBiVA\r\n=wZDA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+jYyfDc22g9+bWAPNx1qrpuCurJpAAuKfOVggmuoCzAiEAsrWYmfFRUp7IXIcq+30gE4ISSAOULkPVX/SC9qK2JMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.51552859.0_1591747699712_0.2507041706137565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.2e269285.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","@material/mwc-tab-indicator":"0.16.0-canary.2e269285.0","@material/tab":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.2e269285.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6tK0vAAVbUlZG1goJe9qbFMezyMIIQZefE0dwjnhxerXhjFF108WrZMfZqnANrurKoMn36EZD0+zeG4dy3+scw==","shasum":"3d6fe686282d18d69f2467115f7540ae67598b14","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Dj6CRA9TVsSAnZWagAAbFwP/2wlQ55Rp06qoCS3FbIu\n10KcPwNpVbHI3lyh+LnhXCm38PYNrgFMmJ+1nV8tYK2EMMKKiKMuQpCTDaLx\nBHeG7/0jCuKJJyDWpo8TGKJfrAYfP0BzRVfvCMLvJ7ONmXSTZsMRxA25A0Ul\nQzuYgyuM0fr4OQQxmfvCBK+v3/kK5a4nOzcQN50tGM7Czb98OdPlwIfAkbmA\nz7PBXe/392WUAuhDi+cRNwX3LPt4WTR+2nwNQJApD/LPrTbBdvx7pbLpwvlw\n6b10LvAvqgSjoPVdor3B8/IwX//v6aKj4P6MCk4drq0jsQTFka8ncdDpcfxg\nT3taKRUyp5V7YpoVP76hRG5fJUFXgxZuZRQiqK6Joi7dxg0+Sv4GujEwJcyY\n3OUqEZsRazbudf7SvEY8Iib32oZYySdIJsWPngMqT88St9CE/dUCFyOUCUew\nhahRACiIUF03UyiVmnz7Gi/dAczLgVqL4Q1O8WSluDQOH9dfk+8Yuui6ef0f\ngtevysYMY6/T8sYjXgWE5+7MH4ndTRto2TlSi+Sf7E8BaYQZIA2nRmREouRj\nH3JRU1ALgjLM0G2oeo/VXfd/zcu0q5HLca0ezKdbh64+hT9FvzSL6vYhy+fG\nDAunEU3BY2t79cHwBQ98GEWVzp3Rbhsl05agXedSx6IJyvZF1wjYyoDozRRc\nc6gK\r\n=PpGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQbmWwpw2qD7PVnN+0fIuwHnF2mo3yyL9ZUX+BzXxgMAiEAmcU67NeiJqAXxfEnoGR3jgugswxNeciusvfz8Gd5BVQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.2e269285.0_1591752953905_0.21573162913235322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.be138b01.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","@material/mwc-tab-indicator":"0.16.0-canary.be138b01.0","@material/tab":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.be138b01.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eNOMb/Ac8XZzNe1Rx+arHGglt/2k79ns2kP/MfeuDRN8uc98FZbUKNHqZc4qcEXAWloBph3Gm8VxvVbQzMv0XA==","shasum":"c1c81e03133e852d1a1ee78e929179caa91e8320","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdTCRA9TVsSAnZWagAAZL0P/RR6Xa6WUM7f8EwQuOrI\nh1gvtvqAb1Nic+FTsBEPs10UFrFX7GG6FLQTPLCNOKTwh2x8duj05fESPTLi\n7OgX2eKlyFd28r9A6ayeGmT1JaXWzWpkmwOxebFjTnhLsbDyES9V+kLiWSVE\ncRDmjxroYZhhjtXh87X5ZHJE4e7PI9URiFfb5mfsD1UgwT/Cpa0z8C/9Y8Pg\nmNVHSXniOMy5Co+UBVGQ2/ZRm1u5iDrNseaI2E8evCRL/d9MPlQpAdbmBBVv\nqlmXIvmoekgM3hc2OdvEZOnPsW8DmoAjaMqe8F7KyKbJ6ce0nt8u4+X9YBU8\necYUEl34GvV6vBDeZFVtQeYbtSggNcS/B3kP5nRK2nw2N5I3D479Qo+vBxAq\nPWGVWkpnk+T/F2WHD9i+0O29PXIn7Qb5lNdoyh1LblpwPTmmsBCzuSn2wF+d\nmid2/Cqo6+5aoGKN6smBXXpvJHWgWxuAqcGnu7QnVP9wbi2zn4CYcqazqK8t\np+fVAdaFVH5kdjifpJzg1eppOrTNABdIcKelJtPQnzjY9yGsCGhCaB80Rsa2\njl/L1oRla3W2UKXTi3d0i9UNPDm5F6w/8ozkwvfTG+libftS4nHqgm06a/aC\nB8p5cI6Vhm9slxrOoetgwrbbZbJesHvpjI2sjsmSySrUzxG5ajS2PmDNS/hJ\nENva\r\n=9EO6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHrPXgePRIr0zFqJJkAh8TC0+tX8U12QOwQFjJ5+5smAiAUEDghj/greHY6bc/rtzP91nx9/otfy2qDIC8Rif/6VQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.be138b01.0_1591822160287_0.9254560688579956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.04bccf5a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","@material/mwc-tab-indicator":"0.16.0-canary.04bccf5a.0","@material/tab":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.04bccf5a.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ExpSYYL01vt5NGEJuFxFbV3wxxjN9+3bp6fpXdYDsbFbci6Mzuli8NSqiby/eJwJQYqQHpzrCGzsBfO21etZVg==","shasum":"438cc1b0e3b1bac94d26ac3c0e24001f052b7880","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BlTCRA9TVsSAnZWagAAnAYP/0bgCgF3ERBa8muGXzD8\noD+dgX1sKREk+nNafV5kxlEFlsiSgLeDMQaXFzEp2VtuMFkymRAJrnUUxinw\naXPgDoOQWYH3V0nqtPTvU46dUXf0gumETfEUakSprTqWpr1dE8SR/8CmALc3\nQ+gGtir7+AqYf12Q35lPtBHd555AuNOA5SyKTGk1ipW0uniF0dwfeDuEnFKO\nvOj1pH1jXj9kEFovBytrsxy3OUaKPFJSCgoTulAijRi1WfAIcCQLQUef62F/\nBQ5qGt87qv83BMnCMgTQfhWfLKw26r1sx7tMHoqsTewUH1r+xepgUzuvHpZE\nBJWxuARlSh8owiv9jx9Ll1AlnemhT9Jb2Eoh2/yHrwC9fOASM7Xll60hHd83\nGyAswyp9VdmhnBbZT9jZgKq9IZqh2hkx0P+CRO0J/Gd8pzUKh4rM4airQewJ\na3/RqCRuz4IxIElISlXGkHlP0hLoOthljSbJ8pBIR7kvX4iPwq5dLChTTu5r\nVzsbuq6TnBgAXL1mQO3fw1eWJpheYwj7hmhvCQCAlEiivFHdBjRtPtX8bTZJ\nwFsXua+AKPzoZnjmK4+gnrFkiDpBYe8E0wDobzt4K7AtjnWoKhDA/DS0/Wjg\nsoYyS3R9BsplVTdd0uSNqwb65XCrZbQTucyYxIoh4tfsYcbkrvkDXGxz2q4R\nRPsz\r\n=Aqg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCONQddPwQOF80DYeIMyS+4PlUINNb2oKsc2Q8+FyPWnwIgbpxS7HbV7p2Tb9mXrJ5+U8uFKX+jAUMVOD3rTjnqrsM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.04bccf5a.0_1592269138676_0.06506480786462321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.b44dea36.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","@material/mwc-tab-indicator":"0.16.0-canary.b44dea36.0","@material/tab":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.b44dea36.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BKcFluO3H0d5BKY1Ahpj0DTXjQez0YfjfeuSYReeJi8nrcp4poQOozs5RiNWoyKv8o9Pzmaw82X6mHU5pDhWbg==","shasum":"25a17b94fc83a18eabfab0f51398c12bda25fdc9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJYCRA9TVsSAnZWagAAM5AP/23RCqDSafFT7JGm97w2\n6+CWY/DPsCWdNEhnxf+gsAUNAes0M60iOSlnCZL1N5/jlAucVeb2WTu6VGzk\nldOOTgmD1aAPsg3axN3c73XBsBMtIemckcn0OeZFnE7B9N0shvB+G1fx751/\nI5IM56Qk32ALLK0jsSAAk/gFr+93BCpoCYY9UnGf5M2/OXKqXpafnoIDEzbE\nzMtI9VeOe7eu4mB4CZcWji8TtIiJyb7o7PVLgtESFENPIUmYxdXRm/tLZEOr\n6MMVEHjPbzhGzEndMOKVU81rN4qGcTkoIyagCCeb/ESvaUjzJ2oqKfxqtV87\nw69V+rji/uUBIY9ahnLxJ0xnfELkpb5Eic4mcQ7RpCvd8h9HSh4ee5Pa/HMK\n8GXNQd8vWX2+9+7eWDeC/rYOdfAPX9eGTJ+OeaUEGPCXHCGDkrrro/Tn92Cc\n2Jp0+ioMN02dVhny7vXpw3GNUmHJtwDLyIevy4x9NoZ3NmxB6hcDlC2ackc6\nN8IugyrsLcBx/fexoseSBjUXUNpZ4OWlT+jD4DGuSmtPHkBoVxJkbZdJZXlS\n/zjU0TNn/jpCvU1mLKhNs9aBHSoa+4E3t2+xYb7VKCpl5nTBGdSsmMTeXTQr\n7xXTrGOc7LPTZx1qFxKoeBMNkp0iaDaEAAdi3wyzsCBRUtnIjENmQ9a/DlJz\nme/1\r\n=oxDI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIbPf/PVtpnAlbykAxJUxJCfepN3c6TGwXqWox0TuPfAiBDSUq+eWZ54ZJRemjibtQRivzvquqU0EPnaBXFRVAHOg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.b44dea36.0_1592341079604_0.8237221756506001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.e2577e87.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","@material/mwc-tab-indicator":"0.16.0-canary.e2577e87.0","@material/tab":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.e2577e87.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zxMZHtaxhQdeEyB/37RtC9qkm/sGX+KvJ1QMBgUrU4enaAxXKmLJl2jjZg48q7LZWkR/eZtR4Y6X42izqv8vYA==","shasum":"8b7376c30d0a5078ce1560e049663ffdd2c90ecb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTkCRA9TVsSAnZWagAAdngP/2YOdzDKY08BbvHbN4H+\nNxy60tSd7lDz2cyCxNeQQALut5o5/JWNFR5Ko2dp6Icx3H8Q9r8a94LQqL/s\n/DLrO0dsajtk7eykojFYS8hNE4tcSlhi4ZjqaZLKZmv7gHZ5LVyEiJSDRvAH\nRjYnKCX9dI4lXTnEW7o402hlPBVHiqeTc2w2M7/REjOsg5crmEBVyHQlisPz\nbeIHLZ9tbVOh+3FpvOuPQnYrhvS3hGn0ndDFI3IP+I9FfVa1OJBzSgIlasWR\nAOHO+GZIquGzFhNQVa6CZdA2UFP5yc+1Fd8DnoEvnpQMHEvkyWrlTPn49S9Q\nQzPbgZTtxsU/WTevYJY0IjFTv2b+uINQygZXs7VoUPu6dOrq+3qIh9FNLtUZ\nhr6DMP0ZIO/0XcsGepQCVwLQ5pie1AYV0ZYLDu+BIOBP+2gSigyk7MJ8x2Yy\n0TPCeMBph0b7cznt7ykIgtB5LqvH6BFR3xv7spVbEtz5lLpZeuWodJylp2tJ\nhFFrdCdkrCjgUQubIAq/c6Lu0KAHLI000wF7GTac7RJve2B6qHCILqXwqI5i\nv90JHJzR7ypEw+U4eMMiHXgxF8pkrGeEMhpOOlDNDeTf4qs7oMoo9J0MalsJ\nRbKe84IuLB2Wro4AeQrZhrI3ub1ImBee7+wa16/kZ/TrRlymrNgg8/wwfacK\nlgZ/\r\n=v3tW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkon/XGC1fAgE1cBVx8g8s6iqpAj403T0hViMXFETo9QIgdIOkb/N8ycx5bAgdrVz55f0kZt/Jht5YPpQ/Ht4FSXw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.e2577e87.0_1592341731837_0.5097534354274604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.58b73343.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","@material/mwc-tab-indicator":"0.16.0-canary.58b73343.0","@material/tab":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.58b73343.0","@material/ripple":"=7.0.0-canary.3aa33998e.0","@material/rtl":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cK319q09FNJxbI3gYOSOrLDcTnmu1/SZA72UU1IcXf1Nkyp2jqSjIi4AbKex+v2ijX2T/SQ3XlGzWpTTcsmyqw==","shasum":"3221ff89bd454c2964f2bd397ea1b4d45e1ee1a3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThoCRA9TVsSAnZWagAA/v0QAIpfC2gVWQdMhgIKXrBW\nkLIsdXeiYxKa70blrOPi95nNyRk+El6DtsCsqA81RjlwyK1G7ajoXErrLgCC\nKOHFdZHKzLa62fO+RyiVQCXvCsfOnDOR3VbNDjAopsSIyxPqu+/J+hxZjrre\nFadGPyMJnm1fMw4us54DPbbBkFLGvsbRfqHWYwBLIYyqJumubBnddjZhVHnG\nQymxPIRw2hEXjc2luVknJPpEP6kapH0QmdBZWq/m/FjH2RqcdwZ7MMCzTeHG\nYM+d5j5al6Q0GERSbEMcfulyzicntJcmRtMtQ9Jf5mJqomAmkDb4Ehyxk2XS\n7/ziNWtdyNfxhb2eYyPPSH7KbWN7MqfNOKUjPAdpTPBvFTTeCkNG34UHdAPC\nQgteF/jq9pSnYkNarGBGqBZEFvN1zCEYWReRRbNPpgVdTdOGkd8ZQsm/XxtN\nVxn3+nKo6iTRYn3l7MWUiGvIivBifv/70ewnmumORG0bjGpQlJa7uqbAqQ8C\nINNd1cD3Zg+6gfRtf+9tYae9g6+LJZMNdFQM68KEADEeeG9AcESLo1ft1CLk\ntGQi+i6kYVWZunrBzp+QT0x27gF/E9IWmctRrRsgtItytyk+IykkIwQu/5S1\n9ks4YpftUvxUjck3N41pLAunt8hrHSjv+qrmwlNLyWdoC1Fuphc31kfi4pPp\nqu9S\r\n=+u/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfW1qik70d2z9X4Il7JlmPT1YZKFrH3kEvtdMSKnUzZAiEAjj1B6Rvb+OLkgcRDegphnvGYqYkSufujV43dY3PWbho="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.58b73343.0_1592342632317_0.780975777649153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.f155c058.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","@material/mwc-tab-indicator":"0.16.0-canary.f155c058.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.f155c058.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vU0G2WTSgqC1SyPYGmNIP1rARDVOvSSGv705R0r4OKfk8ikYXQ/279/uZdEH/ddN/DgmVirJeHQlLyaB2rc98A==","shasum":"1026e4034b9872cbc9eebea7513683335041b97e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662DCRA9TVsSAnZWagAAK5kP/2zjssAqJfozskUJVtcW\n20NRpad3e8CYuRchOkTnFaM9nBJYp7U5AQenDJJcUA1XxxgM5leYZpEzLW3d\nwaskXBT9WyQ4hy4Q26TG3AdRl6ZwplvkWSQ4hVdHRo/xDBxtUa7IrPlvWk+G\nftkJlO7hqRcN4LEiiBF86KIOIodFgzYplDoom/EWe8UsjsXH2MhXMubD6HcS\nr0zb4Ij0IbZNeOwMeqdRLxFc+RTmVExKovu9j0Mu0FBPwfmTY850AIvL9P4j\n/f+KMxeAbMJ8UdYMV66pO7dYRa3XwsdL2O1FSZ3v3CgWyW5DmlxTSY9f2Ll4\npGoLuwtwhKiVmKcURUWRqW7D42TPyDPKuYfmDi5pUqDOODOuihpn7Duvh7F5\nDfCSKoWwuo8utfPLgd+jjIMWTJ+5/tYPXAEOtOZByMNDIQnK9AHXgUfC2sGh\nMRMSXyroIkj9X4u8p/iwxcMAnWdqS8VchrpZK/J3g/FWUHdeQGb/NFCK5irl\ngPnnSS0gHpLJtHnE9D8U2yHbwTy0UqhNqwRs3jABVL8uUyMT9iP6p/xJrolG\nrhVMZMOmWXX3nrJRBP4DNkV8ATtQyt93Zi++B2INQtqPbHZx2yBt3ZCzcZNG\nA1VIMpn7CDp6HaNeuIdrkZ0te470uAaqi2Kykz4wCFOLen4enErr07K1S5Nw\n6XvW\r\n=4kuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqT+Ir3ExXJzR5NCHNelbYfcVr0DtTDzYs61QyKT37GAiEArHDTqi1FEbYXGWS2R5FcxAEsuRIoN8AOEZtnlMuuED8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.f155c058.0_1592503682760_0.8620351751275126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.309779d2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","@material/mwc-tab-indicator":"0.16.0-canary.309779d2.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.309779d2.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9oSCxMX9AIKS44lHzej3uwAdXAZxQ7nJEogj4yvs9wbI96gRB/WnaJ9ndpclliwPLrYHU0kDdCqyMLltiQnwcA==","shasum":"7135630535efa03ad6006638bb01da9cf9f82eb9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+6CRA9TVsSAnZWagAA8H0P/jQIFbeoAwGurII8vWDS\nPsUhOnM8B2segZy4P9tfBiT4vZjafrhnWyXUPQl4Iq8SRh2xbSRYMyIxqXGZ\nUC48feGNzOL7aNm9xH0Ki7OhpMOjYjhhahjhKDPu1/fri0Po2DGMOLvCY42R\nhtEULKHCj25XTHGea68EBuXM6bK8zzF5Onnvco8jvvDKcq+3GoKEs77xmxyV\nJANQkKbmIE8wnDj7RmCsKo+EmGdEfHI1KEChMdvbz5O/X/6R4atjLmkpc5NA\nJDS0DvCUtHD+eNZI09rCcjWkf5oI4766Wurj/v9X9ksfIkcMCcmG/7Ylgepi\nAqE4s4q5vVn/XS/IPUksEszDxGY4iHxqHpcvd8/cSQBQMBxbFol+1ji9So91\nIIJXCXtwz41kzfTNt272m4QvK8jvfTbmpuZekg1qOJ3VeUvc6AvNdNNx4yUr\nLT/Xuq+69hpy9ORzuhlscyHLXnvhjOukX05rZq+ZIn3cYpo7AiArdFAZ12v1\ny+mEKKzCizrI1puIsDAEKgAmmI2WspMIFy9LYnA4kIWv69ZoljsbXcGpQSe/\nEeZ2yXtS2fxaqrwfIcPTV9ydSRRk9HQ6lTARP5KNML9PRMjDqFPKmO+7ByOS\nMfyf8x0ETcOmCdDlPFGcDO9gUPRgwd8vcehuGdiEQ/bAiCZErUoWPstt1eNC\nAwi+\r\n=LFe7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYEYmzuX0K3yrfCoUbfZH3c7uH22/SImwLs7bJlfsWTAiBBzFyt3LEiC1Q7KCF9EEUYSsA16Ds0nq20Msl2KL4jpw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.309779d2.0_1592524729503_0.8747483106416318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.e7649968.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","@material/mwc-tab-indicator":"0.16.0-canary.e7649968.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.e7649968.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zRjFKyYWanUuGZfEhRK3hzSQ4VtiKRvA0f612gN7YuETfOSl5w4STA2Bh+L4ud69/PG0NFtyoLjtoSFt7jxjTg==","shasum":"3d58277646520f80d903c63ec6d030aa48867cd6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDpCRA9TVsSAnZWagAAxJYP/jQgffGcF9YDt/jg41A1\nidUijWMVCvDV21X+Iz1SV5PizNBXGNsPAgT/C0EBqNy5KDIw1NB53IJmDr2C\ntNeFj/YZCCyN1+GuLKTi+r3+SPbTKR24n4MZMJbiy9S00Cab+XscrAze3V2/\n6BaD9ZSu7WXeGtxlUfRp3uz7kGAeqKQkLAdB4VxOfdEf61XoAioNumm6zsnP\n3173RgozXPeqHTXa2dbL3X7/kgSrAcn8g83XCttP+Gp66C4hgWGWCpY3QR1C\nXxraIX97iPkfpLqZJm5WQIfRtxJi3QnewE/Rpl3VgEKOmL23kMSQi9b9SNwo\n2zLed1tt2CSeWA2nqcUqV3t6a0bCjE71jIrSlgfxIM/BjJUnot5NExQkUSKS\nQPlQzCAKT306h2tRoiCCpoWoXXMw2QT/9fPK8+hxUrYiSdigqzIrBYRSjUbu\nzQmbs2gwDQE1EDqB00TeOdLwyXqhvXF+hBVKMxa3+hWfareHUuvPxsFIyDzu\nD3yr/rJmGDi03NY7PFGi8EnQvLXkv4fGEVRgSorNZrxmORoemaYv86om9gWA\naa25hjDQc/eDASa/3IUIHlCAUQn/s1Qf3LiZTz+jrr/rlqIyAB2r54VzaoO/\na6/6QC0wo42F5+hf2qr4uTWT1ncHJsS+d6UUk0i1GnM4jmJ4NE3ftg4W7L2U\nEGS4\r\n=x4eg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe6XgTlYtJ5Yi8oKhOKPvpEtavEPTEGVR7+JcymyO3ywIgefarwiGu4npNkRZ7umSsTr1Vfcn9sHvMyXezP2/NVvE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.e7649968.0_1592602856515_0.472628144144577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.8e21c78b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","@material/mwc-tab-indicator":"0.16.0-canary.8e21c78b.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.8e21c78b.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-r4rMC2PFgf+Djw2ZmtTAcyz3gr+Zd8W7yw3dppzoT897T+9Jveudt9pTvshkG+dU0+Rksiq5zQkRfGYCavOFgA==","shasum":"3ee48a89c3a42cdf36edc37391ec5381963acd54","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IoCCRA9TVsSAnZWagAAhMYP/2f/kRCl/HKd61GjxFaJ\nJhyfbCh1vDL8ehK8lndgQnQrp9/ezuQ5ckv6ZtaQ6JaL6mILRy0mOHAJBW0L\n/ipIihzK8qDh8uBAIbglyH9VJsx8ufNP6elFSPdPLLg9FLUuYsbemOit9SOZ\nDe/jOqktok+KL8AL/jC61WFgvI37OBrc4yk2d0Y2pURTKRZoyQEgOBrHZhov\n0MZNPzaVlvoW08gKL+2//oDrP4r4dEiy6EhIYQ3K+ufkApNK0AdG5PzqxyXF\neqtJAZx2YWaYyT0UizU2wRgaZi+kcZ2+hAqX63w0tu9oOm/gnCOIYP9CoE23\nyOvnI4lKczhYFTx3Z0i3UIjeoLLDMcTPoimxopXEwEJcvlTD2bxqbGSA4dUG\niT8UbR5cpuQwwbVKHMAXB5OPTBlxQg3pxDJfeCz+76+Sn0vqj8+jKwYwvsiO\nL6uGlS/z4T14CVe9qbCZ2sQ4TzxDUflB30WphaMV0+JM83Ucw4/H6fSPywnQ\n1KPUXSRGFMWbtUOxN3DaQ1/8+tL+Y8kH+abk+Stz6a1r6lZSvkEHD7+AzmpM\nLD44BSZf7kuMFuYDMxlBoA7V8oG7iAB7VfFH9O5e/4mAL3zGgIInjrmpP5lD\nEeysLLze1MINdDD6Wl8iOZSswk/V9LwqYdnJ2GIT+sFg71/ofPTQ90hN7DHr\nPUyU\r\n=KDLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcYp8pfIEZYg9/fhw/b4v2ErdNS1EmHPQLEc29k1sg0AiEA7ObPeB5ru2Epqj3RllISZIapRmToUkITvWV4Mn1shc8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.8e21c78b.0_1592822274570_0.39890361894797155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.6db76faf.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","@material/mwc-tab-indicator":"0.16.0-canary.6db76faf.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.6db76faf.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pBRyjpc/zWbBUJrFR1Xg6eHA7Q5HXXP0gP2uKdlK69dMxADuRmnkgeHOPRZmnJqPb2xP1xWNybgzIzLtjlop5w==","shasum":"3bcb865c0f1e1abf65a179b545a14a76a8cd7fd3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7YCRA9TVsSAnZWagAAbMsP/3DJjT8k+SMECGSBRzWS\nErIHaLrkHlmzPpb404VMjXxyT5DH3xXy0sS3wlwOuef1C6Kgwpeg8TZNDoOh\n2T4AWiPhsMIQPyH1noSBT5AgXaOrveRk8UsGEZr48PjyHS4cGJzOzxd2oo4Z\nyUAzdx6VNTEbImY7dtuVMdBvmWuOJdISQy0EQ9yHijCdcE77Vr6c0D5vF+TW\nYJF1Uw5M3brfTMT8GAv3Hyx0GFFQOivyXuij5+yKRQFGTS5RYC1ld6fYOOAr\nt86n+5er90xJ+WrIrJmoclHaSTKUfdsWFboQrlnKiwrOjnQRJNW3ZVnqLzYY\n1r0nWJRpOdYbOTM7NKyHh0aRd3Ewn0/JOLCWjy52ptbXyvvd9kWuzFT7pVX1\ny6cdu4DwWsUWDysWZfwfG49Ec2t+1YeN8ZXI2X9UpnSf0CKb47bzySoZq2/V\na+kkGAJKVpSwLWpq1M5kfeyFtzmYHHpreFRW2Nr016pjRwVqiR57BwAxR2a4\n7L691XYbnPE9wXdVosPMnhewDIsNQNC19aExJ649DLr1NJ+XFBtKkGbJJ1xJ\n/uVUG5BzbRiaslV3xkZ9m41bVMIKzAQs2J/j2/NPd2f15HKhvtqqym5+50Rd\nA7aPdB0ShSEiGTzVXSYEV67NnAm0VkMaan+SS8m1MAiKZUsGHvY4nin65X1B\nRHiN\r\n=mFBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoi8Pk8iNLvymM972Zfm4vmcvGU9EP//vD+IpgrYRrKgIgTT93HBwOy3MD3GXjhl+LcDJ7PxLK20ybmgUiEakWYxc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.6db76faf.0_1592860376131_0.9966973844097797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.c4dd9684.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","@material/mwc-tab-indicator":"0.16.0-canary.c4dd9684.0","@material/tab":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.c4dd9684.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VDDvm31KYCWQuz3IB9iYI7kW/D+iyS0DiwafvFnHG9N4tgIgdo0FFiJM79YZODox3N8Q63nTwJceex7LPt/O4Q==","shasum":"4ef426ad0194c3485c5f1dfa1d5a49af3d104671","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hyDCRA9TVsSAnZWagAAG/AP/3G5mH5NqrvFe+ZZlzDL\n5IH5X4wXQGnGb+IlpaqBJuoHYtyElq7PSqYgYhSevt46Cd99cFf+Q6jefIkt\nuLfxECLBy28/3mURN9Xr7u2IELDHe6qlfZ5FYtqfTzaJ5tokcI3ZQ7fkybdr\nmrXH8i5g8QskoQ0aFmvqZbQNr0gjzzt/PhP3hAvjzmpjGpmHs1Ptv3dvW24h\nLNEpeFyMugVNXSBbX2jnjhg5SNz56WzNbvwH5pi521xzXueAcRVUOq8iJl6b\nM6G/WYNNDe7rDIZ2cy/hcs/g73JzTNCc080GkOw1vpZy7r50k76oCwoVtVSg\n+WFCHn987pyib39Ge4EVLc/9QewfBB3itWnsoKlNaab3nKCV/kSj+0wLi4Do\nWYtBkvVuqj49AcsO4en2TaWXEsbdHsHm1Yq/QC4qt1cTW5uxjXsq4/yFayC4\n4KAUUe+JbX+H9cUrytoVByNRJlHBzs5l6H7FdeqVGomg6ZjC868y65m3nnja\nlkIXVBWEMRtSheT0E8endWMB0nk9zt0nVzo7Qn4nvBVbJRYTRN2cSoOGzKGr\nKspsbXVfbpptrKhDUPEbTRmg0TgY06kYDK8HkHWpRlgQzmn2sYqT3qbbS/d8\nScjDnpz4DOknuX4jQWl34ZQ0KWUvo5H62IOVgB34ORVvE5LP6QYSlhQr/G+E\n6yA3\r\n=N6wR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRSR/3vkzz5p6qoILvw3yS/XSRqD4/QUoBw6jg8tTp1AIhAOFJRXUY/mkd4ySCDF6R1k3Tm8lJkOWQCdiyD36LB2Ut"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.c4dd9684.0_1592925314724_0.5211207933497168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.b3e53981.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","@material/mwc-tab-indicator":"0.16.0-canary.b3e53981.0","@material/tab":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.b3e53981.0","@material/ripple":"=8.0.0-canary.15e81fe98.0","@material/rtl":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-e/7OC2ZOFa7lmfKs8MZiRvFb4tb1PrakH/omBzOnr278eHY6Cq128OgGC4zwPsptZ4c8Y5952e3IEH6wkU60iQ==","shasum":"74799c875c87e030f36c0513e896c78f44aa501a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qC/CRA9TVsSAnZWagAAjLIP/jTEdU+yrj7cdjHiADVs\nh8IjNs2xDf7PrKxhKTt7mM947B4pARlQM8sX7E3kyFo6dz9PjMftIe7QCaaf\nhgWRkD77H9foNnHqAh7BRA1W9ovAt5y7KiudCo4UDvJzDXvC/yn2qAe2ETep\nfTqZ3yrX/5gKCmkj+panrQxFtkNVrG+xJrbvbH66yf0w1yFI29BuRLYLLosT\nJzqThiLECBrgO4c+crp/3DKYBH7eqtfqZVaEbtdwfZLKo9KZUf/3UiL5kFFw\nBP0McvZ9z9yZreJ/4IjhH0JPdGSMux+PqDqAA2mdjKjpJChZy74MU7lYRFH8\nAv+aLP7vYTEzwUysnAlOugwJ139fZbGUFMociEKcyl0D1y661sncUs4vneDu\nn2Jy0pv2ZzFHZd6+iMDjyNF3Bt62zKy1JwYKgwKoPZ+epDk9M3BiyszjzX8T\nGmjhOJZAoLk5ZWhRZfrGztwgLRJduLd5FnnjtEVplqXkOnPgQSbO3H6bgYjI\nwPQ4eLyHOdUy1jhPWSoEyDHwL3AMSxLouLJAWGkNiDhb3y97kF2B7RkfvKGX\nbLGnxELD0yd0ehbsub7sGjnE1PJuXp0WmU5gIZj4k0WIgKc2vakO4wpTnuCe\n3g3uDX3qrGMNBU6J7VsPePjJZAQi8lJ35GvcQlfEoWfbQsPr/nD32mSVQn/N\nf9Ii\r\n=De+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVLgITQ85iuiGCOm2ftrrMAZw7D5MjoERvlT3B0xnxOgIhAKjrL44zi3HYALo5URdBBsHjnSsKyCdRp5+rLXKaPC9N"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.b3e53981.0_1592959167082_0.4842453382533274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.b9468f77.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","@material/mwc-tab-indicator":"0.16.0-canary.b9468f77.0","@material/tab":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.b9468f77.0","@material/ripple":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1fX6b8y6m2zf49MdeaxNddnGEbozfbZknJpq6A/XXsEtBW/dL7Cu2rDh83bszhXVc0xF5lVriS5OqxfrMTWI9Q==","shasum":"93ddb12138486729448b4550c92f9341d5384171","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88ubCRA9TVsSAnZWagAA/YYP/3inxkTxU6o/xQC4+dlR\nxthjbA5GHsg4L0Lu/u5IAjQmLossOPkdEnbc3Q+AW2m9oaXldUezpK64nFDq\nLySV621iLfjelpDo5axJ1bLxanK44ek+pRA13FGOH56OgbLC1xlx6dYtX2qW\nuVJaqzDeETHSKQniExl7IDWiyM18zSscRIq6teMGgR7Q8VEtsly9RCvK3vKu\nehTiPcdoFAlPaYJZlYNBauNcKJDAh21mQeqI8PKYkpzEOhV681TcO2yHTDb9\n59loKIj+RpVeB2O9tX82umOzL4/L+eVvOwsfUZI0ptjx0QQiLnAdy9pUGpuA\nZN1lLG26NlxuQTR6Vh6k0mUxRmPkZ1QDhT9JW8gJHsmoYS6Yiy14T/X2Br2i\ngcdS4GmEVF0o9IDOTj6UhD91TTC4Q8QMFz3hU8GgPah7lUNVW5Mg2iNTqx3i\nux8Zm9XjZ8tMmPvkxPNSlGHRfc24UccpOycqkduYbR930WpZidEGTnnhKQWb\npsWNO/hjY44e42AQi22F+Rj2uRlThHGx/jgRMzqCnCs1t0Qmejowq/potgfq\ni4s/nOi2LkSAGLuKOdzQbgotd0gQ3yL/7pHJtykm+Hwtr/A+0/Cf+EYMvAyd\nmzm5VUGbSHPzTACL159ygwJ/Rba4YkLTqV07hudD/03/5Xcd4g3kY2lFenkc\nbkPy\r\n=2XVv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFmCdRe9bBRRxVs2NWuIfcx488RBpIGjFTuaIb50tY5AiEAuVZLyBOXj9x24hpm3U9g+JY99D/tP/MlgVEHAfU5hs4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.b9468f77.0_1593035674721_0.3561921350845254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.eb790e49.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","@material/mwc-tab-indicator":"0.16.0-canary.eb790e49.0","@material/tab":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.eb790e49.0","@material/ripple":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5dNHNAayE2PGsWMRpihjtpsK3bKSh+JXhkv6MRqwQQJ9UcBR36rOYFgR81gKEY5UnrBhkKztxeFkfJNiGOaBVw==","shasum":"ef2e9a882cb89a7fb36329a5a52fbeeb2e201b7e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTLCRA9TVsSAnZWagAAd/4P+QFoSJPIXZk1LvAosDYr\n4zWBU1RY4lk5UHz8vt3n7AZXLzxLy3xnH1FDPez9mCnL3hdTTlLC4ucbqK0J\nFX3g59g817lhOKoNVjHHvIdlnuSK7egHwJCReGu0TLfg5bAysymggRhlheAc\nqDkRO/i6Sb8vwscKlc5jDyXfq2acxqW0h0Opyw58TVkC4cAAKo4DJjdHpSmT\nwPQO6noFcRiSIux+kOmsCWXICYT4b6/ESx2yxTA0uKJzRtrdvGL2ndohT/1s\nx+fc0HXeS4iWoSc3g9Cu4F7k7TNflsfje7sGyc4fLSOgcrqDIRcaY0l237ck\njYdXjMcRLedZto/aYE01XrH9uvN3uQ5mHPSlGBcG+J7xKiHEo73VhUnFAf/3\n7odpZbWh6l7Npz6u4RR2t5AXtDqfYojJZlzO4laknRRmrZXrRrJu3SnD5m6v\nMAv3fkwbM02e8VW2KJrLmg5GET5tWEzEte8llg0AmWG+MauEsFoRTUdt2SFY\nQSBuNJqFfotbNvWcpccA/TjrkRP4UJ9tb9SUNAk6WFm7P7QV97XY9lZRbkyN\n1u93CDe6mOngEeUcPGRbQlEqcVQlWGtIs0bbaqalcInE/sIkt9jfkBcYUZCc\n0onbUbRR2Aq3ORMDD1U3ayEWTEyKTcxpow5PLrnrnphd1tq6LuxWjocHHQh/\nu1CL\r\n=rJMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSSKyFWdtmR+4FX9kEhiyRWSAUpdRA/Gy34csD0U6fkAIhAPreYyrqPqXdk0UhtDVeW1yvKFpvetgvMCm0BfjQAKbz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.eb790e49.0_1593119947178_0.45849480503232143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","@material/mwc-tab-indicator":"0.16.0-canary.9aa1a5c5.0","@material/tab":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.9aa1a5c5.0","@material/ripple":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ewhocyrMFYTjHRKkIEVgcWHC+/PiuHTvwejiD70jIyhVU3S5wk15Om0qOVDzjUozEbVSOxGS3E8JQe47Osy7pw==","shasum":"952f20843d8c61cd39ba38b1d95ffbb4234e313a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irXCRA9TVsSAnZWagAABFIP+wf4ge459yW484wxaIHE\nXUu4FKPHhpCxo0ro/LBAzkcgBtQgzRH0bmAK0YhYHHw8C8lBQj+qrZVXOr/J\nc3R/gnjLLNWujqtJJEvq4E8t2EwuwWQ8znWs1iDRT2sY1XiU8mwDey6kcX0J\nd7ver8tD3iQdRxS8n+QJDyLN2cxswS7BqM/vpdKHBPbijVPWVJHZkSesgvA7\nuwYn1dh4tIJeMZ6zG4LOhRMSSzK4LC5KN5BK1vFxEdDucZUn5QMW/oGrpd1E\nG/UWEHjUM7c/sWXP4IipY3QmD4GK+lkx3tyC1KZ7K+6uJWnM96w2JYcTx+6C\nfNHkSuZBANdy/WL3H4CSeL/vVZWBFcQVSJfsphSrKSbjzRXVz4DbNQDgd8UV\nj179quSt15mfXZ61vVKcZy1gCVkfgVQVIon/TytpkjN+9cMeHv9S3J2Y5RBA\n/g5RfxhmajxTUWtxAKqo8FEa3iV6mmph1Z52A/VV6IeW7PtB6WWR9vg3OP53\nkofkT44t/apJhn8zoTtPvwh/Czi4fi+O1Byr8iDo5NP12zzpchOL6x2M9ECG\nvGcVCVBhlhpQMyf1gnblFwoizwINI/dtv6EGdihGN5JASMLmcmmOTsVpu5J/\n0XrUtoXwqVxl1sRrZqiRIPEWN0jM08P7r91CzWSKMy8RojEOpH1U2MqzScVz\ne8f2\r\n=VNnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwPowSSPmq7SikuQtaug/e5HLjWasED86TVH2/mO7wlAiAFZL4eSZCs/yzuuKvL+R1Cfuj7oO6YRNFO5RH+7/qlZQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.9aa1a5c5.0_1593191126903_0.7754062958087689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.d36e9861.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","@material/mwc-tab-indicator":"0.16.0-canary.d36e9861.0","@material/tab":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.d36e9861.0","@material/ripple":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Bei2QYZwUr4cCPgjdhR2phhyrFqLUkIDD8xgI+xv3HiI6MUDxRfoIb8YodjM8rGf1f4m5gPUY4VD6LMlvXBPBg==","shasum":"4a39f71c02f29e1bc796e81234fd8f7fb1f0de0b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIhCRA9TVsSAnZWagAAgscP/1G8AmUIF8GE30TD3D51\n6DhB644U3e5eS0yC0yCG6DpSSzgJwBUPXW2jJ0UX6gcE87CWgEFuUvK+xRsL\nYgh+afusMe1EKODqYO0hhTpM0RItvccEICNFLGbwvjZAnOjKUu9hxVlvFhnF\nmZy272K9a0kReIgKj2+2uyiBkxM0oYuWqx1YpJIu4YnlkpNa6kAAfU0iUElb\nbgnxeQez2sTti8400zu5tDvhh2WRcJjI0be+Z/C1Z0/Ou3EHaFtdGkEPEQj3\n40Eo40WwSd++UJz0OIoFc8SkAizgnO47P01VyfWVdXZURo0If4ZZ9bK/3s7P\nZnMfl0X3uIIxH2rxwmHD+mVf7Lgc6eOL8eo4hTCrwnMik7QZuF0pldJHxp6w\nG2doKfkdVx2GJUvm/g0XsH7s5tcbrl3uH3G/P1zsSx6TS3MhFEL+omssgoBZ\n5a5qEVYbTfQHTc9YteE5VOoKVUxd7FzPOC2p/juTx3PGWfLlHvED+zHnzkgv\nMB1elKxPXos6zeF2l+3X9Wt+VHh2cwJDE8Q7k53M99za1+s7GC44DnAD8vZh\nTIbpDPdoDH9fI3CX5FH5VngeBJoEFuaAxHaI68E6dvrdJIWkvhVsGPtnDESv\n10/WQN5++YrEFcNtxDuAK6jFWI5BL9bW7z/OHRYLCQRudqKJBMywM4fRYd6Z\nR7yP\r\n=5eBq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwKPoylDzcQt592bphgqIc88RQTJp84rK+Kt0nFDaonAiAkFJ4SSO9tcb9yzhiOblx1oXIIwgdntXog9SshykKr4A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.d36e9861.0_1593192993402_0.6387097344043697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.155c2f85.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","@material/mwc-tab-indicator":"0.16.0-canary.155c2f85.0","@material/tab":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.155c2f85.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZAJqFAjOptLpXiRZIXiyfch4/qEj36H8+I104IM8Q8uGkm+zZaMa9TUTTEPz36iaD2DapvLG1WWRyvTj8PpDDA==","shasum":"6a42ab0e9ce1b056972cf2b4635ec4813ca8e174","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUJCRA9TVsSAnZWagAAQVAP/2bbXG9TzrowRHHk9n9J\nrCIGiBJ1c+m+67lcNhe8jD44TrKiDqlruwR7FAVTTBLL4f52RGw7mtS4fW0p\nv2T7un8CpnHeBTQmwmK90LcbIOOa0yy7VafgH2cU3l/+TIQZgE8mBahbsP+s\n+lEVhCd2DhITAPP32ycZvgpiwcJ9CIBrAKLk/pX726PICEhi4X209U9SVM/B\nA053Gr7taS3xaiJviKbAP9DdxDXnbJPSYeFbrXKmyzequsQe1QYPG0SrecoB\nw0e3Krk4DKL1t8bDN6ftYM6nRLBpzK9Eb5yTyx/8lvQxvLRqJCWZLI8S49xH\n/1GXjaPyvlvjFvVKceTvK2UBMzA2whELvhwIGV+yu/HBoOy6kSWAOqfu/o23\nBVF4GkEnmjw22mTj+TETPuVrKInSaMt1j6YeiymvJC4GyaJmPLtAgOGlBD39\nlqu9gv6TIwRDX1KQ8L+Ka4zWvuWGrRYze/7WRl1nIlvhFozZtz0UmEGrfbLY\nkzFpl5fymjqfkPqX72juaxU/3kIwOELNSpyTVyxRFUGBaKWzvPDLrvsg+1X/\nYreGJm/EEegJNRPLIQLgW90R2RzqWDK9giLM+sziGt4RghdEo7WbfQkpSEQu\ntZ0LrfyXnxULxEH6dKFXPXK6kJu+dvQSnYy+EoFA/wWxHI90h5ZfZ1yfcXSn\nK4sp\r\n=1nJY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4gmAj3Vx8S7QgdwsU3jaafOqocrSKmlJROS4ZHeKxFQIhAPtEDTi3leihw94cpyrqtodGGU/y0ex2UDOjU9YhPYMB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.155c2f85.0_1593214217157_0.246745513838732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.340c9c40.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","@material/mwc-tab-indicator":"0.16.0-canary.340c9c40.0","@material/tab":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.340c9c40.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k1yi/8VsITwLN0cpvfK6muuBo45owVNtuuFyH9CUJKZrEcFrdRdGp/CiMPKMVzeeH5HP/uiWwoc/ootgKMmj7g==","shasum":"31e45d96679a46d05877d32c9a51db300df133dd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ob0CRA9TVsSAnZWagAA/T4P/2TH9wZb7flGt6a5GpGf\ndxrD595JFEiIX7+uHZm2IRbP+TMtxoTdYcjj0RHg7uiBFWU29YyZHjSBQ+n/\nBdrcBQWLaOAvoC6RNeWMhZne7m3w4Yyze03iLsPGn4zFSw7tBn7atsnGzp1p\nizjxx7tlLmcswYmpKgG2slMdt9V1zvwyICF9LTpoiEUtYCgwEGKafj+2xHp8\nIxIj9Y+nycCB303Xjmne0a0qbLKabIfM6aVsrd0h3VvEAHYojMO5OpAqemDx\nRbbBYVpqWImRWXQE2ydVQ2j+HxrknKJW/ZgRW+knXK7NNJTEI88XuJFtGBRO\nZMBWRPNpsbZBm1c2lPOP+uwjleY09tqNQ7ogHH0T67svJpJNd7pSiKxH3JAD\nfnpp1Nz+lHzOr9LZW4gG7y6j+fXcJandJCbPGzq7gnvqyWZWk2P/wJPCOgPn\nivRHgYkdZ+8QB7oxYy9lIf+iximGpv24gNBh3dQoV5LFMH5cU3hSSt83giDu\n5MhDHIx+Z3VqzBm5nFMAOTsTVc3QU618ABqHaWbUipkjIRA6C3TBhVESV6oU\nmG6/zQiTnKQfwZ3gVcJaEgjuTo0jQer9X3APIpj89MdpEcDMf0sZE9Fo/qfB\n6QqcvW4EorQfV9G3sCvhF8CXk+UsFcTaAGi0OZk7nDdLCwsGgTbOfR0t0IjD\nfGLf\r\n=IQ+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvPgCJO37I8BMDh9M3j9iblbAM37lszACUqhRwyvlmEQIhAPSXj4101cCkDlUoyoY6pJ6O4bY1vh8DkcZ4qV48lqJ3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.340c9c40.0_1593214707444_0.7202973572407863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-tab","version":"0.16.0-canary.a3384d2d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","@material/mwc-tab-indicator":"0.16.0-canary.a3384d2d.0","@material/tab":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.16.0-canary.a3384d2d.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-B48zP+PsFUx01ekRImcnrmJUSPpBO6Io7qU7OlI86I3QACtDLEdmUXPQ6U+yOZTypaNrUNaBUP5SKksUNrSe+w==","shasum":"5bc8e5103e5ad0afedb12e819e8a38d33294cdd8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6f4CRA9TVsSAnZWagAAzZcP/2qj4txIgYcesAJ/ydo1\nM/BwiC5/oa2DVgVR5KnbbAKqJfj8UMJbqdTaocnoh74qxUvV+2QbmkwunpzE\nicDzXv4rNPDoaiT5PqlPLI8q3rV4JK/zwEnD0Lrt0x97RIZbWXZ92gxhZ7U/\nuyw/3DykbM28/lbGVEgjV4QQeiv+7t+be24emXwj41D8U4giiof85IIfpEdV\nCkRktvqWuS19BLYZuJgeV6gjDYanYZjqZmkH5NYCF/82V8mIpsBsXUM0eYFA\nCWXR8UI5sSfOF8cOTQ44Mv3Ue6G8+s6lwTef7EheOJPsVXtZI52mzZj2Ha8U\n8fapqSxVBFpeRBPtUWmA8UVJE0RKKvTir9p4O/JZmUiS7H5VEICTT+qcP5tx\nhOkrqCIhCDlb24wEIyy661AEK2YCNv54qnHuQKY1tsn2PjLBTjnspu/C/O24\nESk30H9LTKcyj3LI5v/auPfU0DnCe+XCkglpH2w5amh/y8d9e9WhJ2l7Totd\ndrdfXdhuM9aWW347y8lt1zfYo/IhZZ8h9CO2sDZozIgngHEuH7sI1FiaDXUg\nYlfbYv5BIS37tcKmi5xNQsmKce63HnuH0vn5GebiYVhlanBbBylNOgkjy07A\nhwm1JSphW/5cdqt1Wd5fy4bpEz6+EwM7Q/F/IWQxq7Vv3DKSC4Ft/Oph6pZd\nFWeR\r\n=J/Xm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTiS6gVOFw0l/lr6rMNp1rVn8SuQYSnBLZyYUVBwFT5AIgeP0CdVj3jpFYoDPffv5VSefqN2QDul83lXUSivk3pRw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.16.0-canary.a3384d2d.0_1593550839695_0.8204700342042766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-tab","version":"0.17.0-canary.6d056c96.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","@material/mwc-tab-indicator":"0.17.0-canary.6d056c96.0","@material/tab":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.17.0-canary.6d056c96.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kFALuvr68LCw/Dj/EMjcizHF2ZnebFPu9lNKFxvmRKs3hf/6AaiTZ5yg4D44GnV4kLD+9PbsL+HDAHH9hSL7Mg==","shasum":"9ff15744ad55d5606b076838b1f00530e961ba0c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6onCRA9TVsSAnZWagAAjlwP/2R197Y//qnNDWJLyspA\n/4smsHkDSFTW7YQE6nNT95zA9VqaITTCEaudrEiJ18izRQ4VLupgMck27Og+\n4+24tHrqIlMoBj70eyeBoL8GGBhNjp8ChN3KCE2keV0U+/Fo0g1m3njrdgxM\nC/P4u6mZnyeQXnixuslkKhJZxGrLTiY7QqtxoNfuqGyw71VJj7ur9PP0B4QB\n8I9YXh2qg++wnHBVI5w5Fgm51yo9csVLky74A7OBPA8h4L3EiJDRB7jucSyq\nYuoCINM9p9vccgooAEXEIxBfn/7EprUIYB+DNNL156IpZQRGn/rQOY/ZneXi\nZZumtORpn56piEsrj+KBwwKjyIt12bOyfLc0EOxVOgq7F0KR/irhRQzeFGfY\n5UzL7CXOcC8RpDW2p6bUAvmtii3JzSreMmGkmmkR9AJsa8TMsTgC4bSM/um1\nsxfO+c50TJxuS2mtMZmKUPGrXrKaKpt7pUbU6O4isJrGz9fRF/G77DUMk1C2\nHgnFS1y4U+qLKtXhzd4hgp3KnKNJXbXxQwbtWBBB+SDst9KVZyzB/u4n5SZW\nI+PIM5fEnSXZpwSkg3fYoPxqEJPELYVpuWY+qcBGnFj3Zxpro9UOpN7XRtrD\nFpJcU/LK0cgj/ThKQoVPNZzv0577xQf9Osw3lksmgcL17+XrPxUfjPEwLjE0\nPsmD\r\n=bcPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYRMzgHj9SB/eykCixMyLIL2cNOPDAPUcZ3PFCvCCpuQIhAKibhx9bjXUPHKQ+tXC4WbSH0/otZY6C4uaLQTVSHBdS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.17.0-canary.6d056c96.0_1593551399609_0.09559268402580656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-tab","version":"0.16.1","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/mwc-ripple":"^0.16.1","@material/mwc-tab-indicator":"^0.16.1","@material/tab":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.16.1","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-7KJTfKCq3lGefGaZ7eiZBivfTplYzgWBNVsATH739AK4b8dolqThmyZj/Y9J16zvM4MMJ9vJM4kyR6HHRKFsFQ==","shasum":"aa58236c7a6bdb49c70d127ce976b2c41d18c6a6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.16.1.tgz","fileCount":16,"unpackedSize":70456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tNCRA9TVsSAnZWagAAbKgP/iMip6U8GVYI9DlXraRw\n/GQlTufY9c5z/s2MMTn03PKBP4MnWAyxCpYyGu1IUDgFh6X3bqumtv4x2jas\nF2m85+e3davMhOeiy7alIb8nu6+5ml3jrDz2oCkmhEgC61hqOBCc1TgSa1BV\n7/4O11+zSfUmqNs9GNWjgd52qOM3WTQLiMde1EqNdFmQt6gpcn+sl36EwzE9\nEgFt60V21EiIgWFHduQjjJjamZUvgPG8yOg/PG0V0hc51qcLs8WBc5yqDDAb\nkUn3MqtA6MYXHB7mGDOwa2awTVRbMmaEmqYFTleKtpFboW2jQ5uq7a0MsIi6\ndqhgYT0vctq51OGQHxm6tOIDSLMeQTf32/z8UZCa0DYMtkl1XId1MfOtkEah\nGmY9uh3K6fezrz/xt6R1tmXRm1LPzIXHMg6rDome1t1KySNf8IH+hZHcSsoo\nm5ICe1zRhQU1RtXq2VPUJBas++cEYScI+PxBb4Ea102lc5aIJfLTyvTBZxHP\nhSz/hjFpiKU9gbJs+8m0RTxfYP1zN9RiDP4gONxVhwKOPZOtrMHsqOHk7iNi\nii0TM2PZkPL7lPyrPJai9N7PlZTWPiJfI191tzmF9XKp6Y84ALE35xvNIA4g\npu5LyzyIworyiVpuF3rmIiY0OtuXrkmFRlzcIrzwAQvcSpbvNkuOFCnWJJQl\n/INv\r\n=YFRl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCUOVsh1iJQEDxoDcYKf81Ou3NMOnTUzvKKDNFnOI6egIgJJOrr1scpe/JPBYI8MnwNpikj0sVu+vFcX/Sg1ZPGtg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-tab_0.16.1_1593551693362_0.3165571864754284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-tab","version":"0.17.0-canary.f7e37607.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","@material/mwc-tab-indicator":"0.17.0-canary.f7e37607.0","@material/tab":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.17.0-canary.f7e37607.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nNuVAKe/74blLWg76Kl7ABtUiEmRojvPmwjOoH/yWh/KxBz5FPhGkOkVJKtB+tbfBn2T5gVPiHWij6GIpm/ydw==","shasum":"c7947f0a615ef77c04095ebd209378d127810ddb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7I6CRA9TVsSAnZWagAAmpsQAI8WJAiXlYg2/yjKyJUL\nOl1vwVYoY+Ib/KTDX4mYL54fNCDNhUrcfMFsk32DFzAPfSZIplv/c4BJy3wr\nVoLQRh8crdNCZSk2GTgpAPsLWQkiVPBDNyjqq1NtHucf/Bq5YPp5BgH0IW2m\nZNYL/yYiujz5ugz6+ZaffmXLKxrgjeI9aRhxm9P9vLBbU4mrUqwWhtLFAq41\ng4oSbAHRtBeFCT/v9ffRSejknrCEGSZRjE3Y2KVmyleq2H1EJIKmJA7OcCTZ\nyVqGdi7MOL0LnLY3BhHMPlRWrCAtNQYOHxET1v4XJ5+f2JtE12teLdzr9IBS\nffI2Y6hY3wUCJ6OEVJCFExC1/AyiP459KcRQv1OGXqCyzgYX/eON7KrI6Ke7\n0PdQsFxP+Rk/bjGD4fS9K2e+heEXOzu2FXUv6Zo8Wsl5GaYL7jQFF8B9SAOd\nO1AEeKfjYHmDS+Wxq/IIZJCETSAhntV6n93DBLiQHRFFHizJgS15TKqRhpAj\nhoPMyAZBRYpKwb2zPE8g91U44b+BcHhVfHVFYekruhIURcdcHaPjCmcV4S4t\n4bBG98IiUGPqcuellYOrGZMFany9TMl+mcVwOi1BwA3qnrFEFPuXhCZioMto\nwDOfBLYpgCfB72PCteoQsX15+GsFCs2+OIbASSsQUbNPrnZ4V/3kDpHUlsCv\nqgDl\r\n=iPQ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO1wZUPgQJ1dxDd67LFvlcYukKEcGQaAnVy4qPbR9w3AIhAOsIbKoB9E9A8h5+F7GvABDkQfhDAoh+NKal8zUjo3Xh"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.17.0-canary.f7e37607.0_1593553465998_0.4273242374765185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-tab","version":"0.17.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/mwc-ripple":"^0.17.0","@material/mwc-tab-indicator":"^0.17.0","@material/tab":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.17.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-fv0bNInsbNXm0+Du+32F0msxDs618dOJ81bg+XvfxNU9o2MJKJux7NAJHcHf0gRv8qoiRCvQVoIPgWO4CfBB3w==","shasum":"1b7ccf9bedb9c0e81878236eb7bdfbbfc69fd09a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.17.0.tgz","fileCount":16,"unpackedSize":70456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeYCRA9TVsSAnZWagAA20EP/jk0l+m3AAFWPasoCD6c\nhY+J3UuIrb7CW3TKkfFn8ks5W1f7kjLI8KQWYZV2sTwxjEU3bTqploUcKXck\n5cK9io/eHh6bRSv1Y17vQ7srHEnu8clNeiuCMvwc56YMStHMOwH1DC9UBH/D\n8tm9mBV4GgNl1gqkZfmTRzraOvWg1SK5ivpFJUGGSBRMtBNn2uc9PNcr5xIh\n2FpxJvciVHk8nz4z9FXKpgUveoOTyNxIN8vWG9HOJlCPGzBNSwfXa/qZFAFE\nu8vU/CMjADuHE9xNEaDJi42RsEuNsQg5Ew716jJ9oqWFGlJ8pbBP2IZo6Ymh\nmnpYRqVk0hoTIoH5dGaFInz6T+NEDf5JD7NUy9QT20yJ3CphJqSfteF86Dou\nFjaOlAIrKB59JXCqR8kAadwHZz5M9nW+pW8lb5+1LIVzySI7k0xaqAASro+L\naWpa2qv8Cj/jixkXTblrbUzo7/a76BZV2mHRhTqtA/wvpC9pjmhKq3XbEmZM\nG9tZ+ZoW48nYSX4nQRO4EzYVZQ/6xtv81OyckvPgjvCfl6xxSo2QPNBcFWuc\nrWMC050Nw5uKhGYM19I79oQOHLhaT2TN6FvB1tMshp+WXXoKQGMDTAt46H7I\nob3HNnltN6ElAvk9KplYOzEIWCkQ9KeqCUWCJvlZzGOkS2ONz7BrhlquBA1f\nYhB0\r\n=PukA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh8z6c5pza394qF9y18Mxno6ZtGuVf75YejcCM9m4VcwIhAMIt88Bo+7U4gMB++Np6kxHlltb7r1FMwY8puoj/hskJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-tab_0.17.0_1593632664053_0.6854673502293711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.0afbfef2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","@material/mwc-tab-indicator":"0.18.0-canary.0afbfef2.0","@material/tab":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.0afbfef2.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-U5T8yz56rVV7NWNdKjwW64P+YoLkb81YuAIpq4GQebG1W6g8ZReau+VBvAX+En25i+J+gRHPwh2kLPHyX61/mg==","shasum":"55c335873df139e958126c68748d6b10c37b1bd5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OelCRA9TVsSAnZWagAAYL8P/3SThxRKBjCuQgAfOHvp\nMwmpY8LVdBUK1AzP78Y1R/TGyQ9vQTgRtR5GmlpQWe2iR1/are04O4nli0IY\nJ1ooChCA+/gzwbcH3wuzLTRrYRLH3euXgHreAqeSb0P05ETmpp5c733OMx8h\n4bXNORLfXc40X7hbCmXd9Gic8wPU4/KfDvYA4b2x1ko46EIAU2l/CDKToZuT\nD3/5PQYHrnHDx5/2e2D2yaQJjWijnLB8xuRn37x8IwOTgBvJCom0Ss8NeH6W\nbI2iTWXLh4HdIRvyklzgIfMpyu6u4h6DXLQVpqhL7BFVASP071tatlmzFJ3g\n5FKppwyw7cU4rRU9ACSucArsjVlSktTmWe8xfJ5I/EXOPUeB5+qUMhvV1qTi\n5P+6LCfCp5Frsopk1gMHVajYdqR+VG9AmF7IWxIq294LQ6uyvUIoADcMqMbY\nxBU7VhEra2Ldz8+QkVD2unfcy6jEPKSH6K+xjK/8y26OCV58jF3JKP0IsUXE\ngPnH95EYKAAMxQe4trAUyjIw505xmP59rMHkSazmy1iD0HKVo1tC6LfmFUvP\n/413qXm8bSWC1GgrK6OAufj+KnTw1d5GVM6qTUsDpLPKQtrffrPDTvg4q+ZR\nW9k6L8RKlNQmFt+f2biT3RN0ypFdu6yPJjwRJXkxakEQAgDir7x2QVVItgKn\ndi0R\r\n=YNJu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ32uHj6TKNTl8AzMayAp3KrMRFMecxHWBD8IlMH5WNwIgWYkx/mTS7Tuf45JtKOBpJaUUvGxWVYe1tO45vWOCjsc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.0afbfef2.0_1593632677213_0.9932964008194378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.fd970958.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","@material/mwc-tab-indicator":"0.18.0-canary.fd970958.0","@material/tab":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.fd970958.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Rfr554KhQUc/+UCswPRFhhYLrqUf+p7aZc9Vug+0asUq5r6BlUfZEKFw5Pg53Lh0svJy2XRAdQzXLjkucBLVJQ==","shasum":"87e5ca4700c15c1c9b806f3a41bac5d9366480f3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1VCRA9TVsSAnZWagAASlAQAJJRhMzFxwvMLJD2FOeu\nDIKVRzEBo5fuJDB1Chgbvp76aDP4BR9Dp7adCxspXm70qq4n+kvAMeDz6ISL\nLaQ4GviQBxdHW1X4V6vtiS8WV9/7sBO95ymfSjJVG7EaJ8/sKsw8uTn/TQ6L\n9ESdVy3jxxLDyPRO+sUsBdIFTJVXF6IChjK+rtutgb/+DzcN3eWHXoAWtVhZ\n0YHXXwzS/xgLvM6SuNeuID7OLW+jLgoa+f++7RhKonww3ggn1lncvNKCd/1y\nkubTzGLp/14Ft5dj6RTpsXI9fwZVbjNs35hswXHFJr9A2vRfEdhE9UliYnCJ\n/Sq+W8yDkPKvpGdPuIKMULhARGzs9tpFhKcQ9aIDmz0cFlxZPEcUG3pSPg56\n2vgrXyqeXGp869Ubmy1gnvRFpRWDAtNV395/IJetotI7tBizuiROy2k3qF2H\n1LJ44s68T3hYtKdYx6oQHI+3pdMLvoCU/GwlFLj96uOZanCVEiu3O9UsvpER\n1f9ZKpCSdzdQ7KoOSdtyga177EwHHxCaOiL1NUKZQcf55Cfrpp5+HYoBPVxV\nyWTos58l9Hkep8KR2GWmje52In67THIjaPEj6fmUI+4UW0KGNC4ZImJY7847\n4hEczRbp7nEbeh3NGgg+gkfipq6Z56O/mP6MlaWQR5zGd2yyXYeDkqOcujG4\nTB00\r\n=qpE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA02Cybp4gJVY3VRpT1jjyoz/W1GmnECnayAWHcji6EfAiEAs6D/bsxxWPY1DFLwEPRGRaiqbfwZt9otwXj/aWqvDW4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.fd970958.0_1593646421021_0.5040882083506093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.fd44be19.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","@material/mwc-tab-indicator":"0.18.0-canary.fd44be19.0","@material/tab":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.fd44be19.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pq3RB+Tuz/G93MhYfPPBqdvFYZn0WMeaqtHq9nBw925eshcI8SUMK12Fey3h1oBGHgceQEjSnOFJnzBTJT90sA==","shasum":"2da9434929b1f8e591fc02035b76402748fb9f35","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XU8CRA9TVsSAnZWagAAdJUQAJk/1HaRF9sjb2c8TmzJ\n7euq37ZXPkh1B+8d6QNn0avRtBZ9p/RLWMCT08DUcBv4B1YjHwq1eJMldKUP\nmHPJLG1jcAw1mIIGPtgS6WMHwTlTj/IGa/71WGoHyHaS9zd4T/TIIADJrZOR\nATFBWl8iPViPf+Z58KsTMHLRoMmQW1fe/BGG2r7oA8DoF67/zllHPDFQdf+I\nLxrN00NQ/RbOE6C7hjo9WoYzBOwHPHaeqaWvzaMhRjgLXJzU9Tj31oONxIep\no9Sp+KUVBfj92u+xVy8l8RKaDbzsvZY/SKhU30gHhTt4wHEwI/EUkVbcb1ka\nXJBvYCTad3EM3E+N00G+4M6H1j+rcM/9vut1ZxoV+UDpvI8q62Adx/APhtVL\nyZxEmRk0Y+T0nGGS2trRfrldpe30cC/5YtJ1q04LYNi05WflXsWEY6bSog3N\n+tNZy7ZnhRaSykWtbpT7Pt58eGYRhZInLEa6fGmWIOQ4wPoqtimm8q6gCO2P\ndx8VdJZgSXCduG4iBboJlYDVQ+eDJ0wxYH2t6/yNMk24S3q4xUSgNdG5+BkD\n6H8etHMHzCXJjYovDasXkvm6xfJR7vys3TaKA2MXdfgc7vG6cg8wWjbk2/gN\njLxp5FgmQpzOa/cpUFE2uUk4wGXJkpmXZ2qZGhWaU//P+HBFilA9dlcTlS7G\nfXex\r\n=NfbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN1JWBzej2XH7FNMsvltyX59r9m2qBWH1DLAto3AMR/AIhAMDqinSSRzclpiag3/erHUNpzssevvcfgK7VO2QT07nR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.fd44be19.0_1593668924005_0.07870159933488274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-tab","version":"0.17.2","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/mwc-ripple":"^0.17.2","@material/mwc-tab-indicator":"^0.17.2","@material/tab":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.17.2","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-M8+T4jXL/noG3MAoxXNuN/or2Ky3Zozxa9XsgK4vGHK3rN5tB1w0t2ZMjmVgp8qJ4JIqgnYtsiM0Z1P/MLV4lw==","shasum":"5629164b9099acd6d3d1109232b99ff23088f0ba","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.17.2.tgz","fileCount":16,"unpackedSize":70456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeCCRA9TVsSAnZWagAAJ4YP/A6uBhMqhtzVP9tpv6mj\nanb8T6nBY+rRB4JnCyd8R1fhYYTsasc8nMA23EmkZW8MAxVOLxti+a/qRPKs\neFbE5ZRMy6rZjD13WT3KgJHZqK3gC8BjXGKQd1Q1UDeaAYQSGOG4t66Z74C6\nOTgLX4Z8QEyWkrAA9KTPPglVWxxzMWlPdEsmb7Z0d6WBqGnSi2SMyNoqxYwZ\nEhxPYH8VAAwB8buMtSMQtOBj7KAJC8vLERvZr8xt4joGxLoR7ETuq7EMIFUz\nQCW4Kkuw+yJ6ORdUeY6onmVGGwTIdrVJnyOIM5Op+X6zDe6GAO1H1g7+tVSX\nPlNJBKR2NqsExbp1bVOitpvTNeKeyjh9wuRaFMNhZy8zb2XtrL6IWtOS6Jyc\nLqI3Qb0tP9dUxTbhgf4vHCFfNXt5kUnXBFlRMYCF4ZyvXxMk0DwEi4/d0AwC\nyA2+D+19CBVw5wTn6pb0tMsCFw5QYNUQ2EMmNPqhbgtvwgAvzENVavxRz70N\ncRo/xZ8wG+L1Bl962TjrIgQOWj/OtLSe1f+AwcumOpCQsr9fUQwL+1GWhmgs\njMlXj4arpxZwArxNJjsAkMejEvoEEYLlzAH3sBsMhy9VAPmcU+qdnNFqfN2e\nyc68BOkoyliHYsDVx3ixokTdXeDumu/10b1jiwGoPpGVvkyy4uyNjt4QNK9m\nPXWg\r\n=ewJj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt+AtGKBW/Ege0RbhNrHCCgIcucFLuaqgKRQlhT7o39QIgPW+AAaZOk/RpRrutDS+6a+kEohiWUmnGX9S8CN6sVKE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-tab_0.17.2_1593669506531_0.07504305328550309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","@material/mwc-tab-indicator":"0.18.0-canary.ca6fc6de.0","@material/tab":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.ca6fc6de.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-E4eV0ChzMfVhrDDg0Aa+6IPVK+UZtqpJuhJvF94g4jzN4jh+9MR2006EyrEaqNsn4ZpDdPVYzxqKQq2B+YPvRw==","shasum":"a8ef5c4f2bb3675e9de522ddfc5cf87c83d24b7b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfGCRA9TVsSAnZWagAAW8sP/2oYk7sYllhEpsqZra44\ngSJ8/9r8tZA9lM2JkYAeQzQLfgczeUXMRr0W5NyEL/Egsh91wrEB/hmG9ZV5\ng9y5YKz3j9afRi1DgNdaH40M0XN2WakXbSXksOUG9IWtQtc09ml0SWYSyrNu\nyLmpwkkIKN4vovRZkBgIjYmJ8uE4VAVgIUGeRJ9GGSjckhmC5Bg9CMjPQM3t\nK/BCY6O3XskDGj8zEMxTMLRlJPbzPeo2azo/gL9tuoXLFYAuVYDJk97wn2Dm\noKZQOUp2egfvn4OvDYRB3uCDXDyYKhL9oKDpqr8zuTGjmWBQskoFcnfZkMkb\nRcmPpYZ72s9yYH2hfpXAfCdOrs4N9DOzQ9kcn9u27zPHccPEHGuQ5isVidZB\nJdMDIb/DgtDhsELD+xPh/xCjudDzizYcI6B9qetZhDhPRL08KLa4zdic62g/\nbXtNIctrZk6NS/004y6ZB3QYtFDN8oNfaL5qU0MulRNbcZ3eAi9mF+30Di3z\nvWezeHlia5TGKkCbOxLA1kT1K6PveVTjas4zyHqu+uxQT4l4unaOnUzjEGPE\nQauw/cG8gOBsFC32WcHJlR7x6rFj05cSdV3UrYLvTHZ9Jq7Sm5LgwkNR4Ecv\nBop5kjSqQVI2zspYfBnplFH5p6IYpF2Gkkx0xf6tcpmk9ff8gjqScRfeKyDx\nvMXw\r\n=Jn8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeLMwCU7iZ8/4QfcHR61baqJRSh0lKD5ioEggDqGVreQIhAOqkBhS01S+BBX+1soW08u1sDBPT4p8zsBLjwSK9M81x"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.ca6fc6de.0_1593669573751_0.3316552544622353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","@material/mwc-tab-indicator":"0.18.0-canary.79f1ec2a.0","@material/tab":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.79f1ec2a.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uEXhFj9wfSab0rZEInnR1E6DIoeOTUa6VLidE7tAgxDay4pYMkBwrEk/YdLOXCqzWhaxiuNBE87nt6xK7xBNSg==","shasum":"19af48f9f8529a0a348389bfc6ec223791d0b58b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHDCRA9TVsSAnZWagAAM9sP/RZxDnvqEZ157XH5QPeW\nLddSvFtgC9WIOxCGrXacQVx61nfkhiAR1+gijNQ8owKa3A9ITyqD0My8HfGK\n5BQyho6TuzW6/4GnX9E5KwtdPMxfXxZ/TqEpodXtdYOUmIiH1xHtMSPt9TSJ\ncnotbfL4gy2pIP2x4UTkv5hP6vKd+8wUcTF7N/RI/XUKYFoBmfsMAAQsZ/yJ\nrHprtDmgEuapM99U3hEz9Ufsm3XOy8dRdGDcQ2BPHz1oMfbfPcoIAYiZdkjB\nPgVOaNCrTqJs6VYkdMdv/8E+MnKj/EhO3oqhZAnt01yTMIPhpSTqR51TfHo8\nvyehO6y+il5ZK1NN8W4MAhlaMlhDxAK+ozOq1osJDWn8wF/6Enpm2KureT7a\nA52g9C0s+N7dzNLP7M3//MSkYDp5k8itfPze9+wB8+uDeSHKl2ldMnWrsvMo\nbnM3u/YwSJE0YJlIJfkY4oE27y6fBiKFlYeNsfEPIv5E1HyrPNRpccRb86Ot\nSSZqAmoIWh0CP3ldcwQNB4l10PkJye65P58zgu9ohlVGCkybXa+bczEHpgS5\nhYU8d0JU8560T1wMT1alC5fJZVFnNta8jMst+pKbV2UOBTi1fgrcrO64U5x2\nBI+CrkNzycvzpLx0Hr0m+5bwLWw3iLShDtRaj1cNBxB9zgNR+HqkGWVZAsiI\nbCKv\r\n=wlSg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTnYYi9dG20bASfZ2Ex9djIZmC0aXEnNC0Get7Xf+juAiBtTBv0ldrOQvykcadxdSvaSjTeM2Y0kaE+CThwZe4EhQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.79f1ec2a.0_1594143171533_0.8832610425849723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","@material/mwc-tab-indicator":"0.18.0-canary.a7bc45ae.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.a7bc45ae.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QKwx6fh42nY8ZvfFC+1EfqkRearmrLAO57H3FsHVpE42QbnhIzW3m/H9EIPChhfBuNmiGgZog0t0HgST5zpUTg==","shasum":"d773c74b88b91628a0d108175ae1183a15ea696c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KRCRA9TVsSAnZWagAAx4wQAIzm5WbFzxMZ7Z8Qvj90\nDUYsLc55NBG//kfepCwMLRth1Gslr93s9xSRwDoaZUD2CWEuOjghsfiMntMO\njG6/+Gtvn3uQxdwOZ7rFo2csEaUNpsmXazA3BtoVYfc+5Z2T4L4vUNeIpEIA\noPOdqLQZvS3Xrn0rNjJeRLzgQPuwt+PLnj83Coiyr/57AkxOz02RXfinf7Ai\n6q/p+oIpllEBc3buYv8agHMWyd1tKHzchWnufx8zuSQ5/o0AWF0uvBlgIcOE\ngBk/HmBvlnuBuiCWOzxbZfzx5Yq2If/4ADUHcKHq89yEbAUmoH1+r8nXeBvm\njDNEpoopw6lxD4AFyWbyOeJvwIjR912BpEt+zZLkwAFA7GQvp69uDgvEV5g9\n98BH2dMlIOQYGK8h8B4gkyP7Bl9pgGCm4WlLX7q47v6dm9Rn514Xr0J9pE3N\nu6d17r8C+7z33p6Mt4yqxFE31FvZHLZiRDc2ivwvD7iIdC6rtWgebSK2Jgdl\ngaTuah1nEaiwtkS+J+Z1N1xSRwIZIwa3KiHYqFCW+oRWHtu/N/5eqaPBpOIv\nX19hm1dabWg0VzGckeatTS5TMuFFIVSJ/dSe0xmG/d+tyay3lJMq1Zh5oPjK\nl75XE6ylL2/mrADEEe18rUsvBaj55ISxCd4TrxMxMjSh9meK8ZD7WQr+XeDa\namWq\r\n=NTGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0qNXRKQ2YXiL9ywiWNKhWucCbyGBjYF3l/DSD2DedrAiA7MUdtJvQUVx5Db5ogELuSFqaoyvBcA8QbBprdSAR5Gw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.a7bc45ae.0_1594315409340_0.5965590114523633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.b184bc1c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","@material/mwc-tab-indicator":"0.18.0-canary.b184bc1c.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.b184bc1c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DTrSKAlyCUbjtCA1nZO8Z4VeuYN9YiW3wwQ6MOe2Bz0BRGKio7+Y8iVvUK+Y2Z/QSfgZpjtRCWNp3EtLsNmkKg==","shasum":"0c3f53f34136726b8c5e501bcc1a462d7b102257","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1S5CRA9TVsSAnZWagAAClgQAI401XYNElCHiL1to6hn\nN7+iKRkAgl9UNi0d63JNoodhZ0sTNhPDuT2plp3N6jwxnq/oO+jF0yrDOopB\n21YIFETS5rqOtOGnG2IeqBW/hGK8PfEHKhYCbKOV+zQZkdQTAiZnYY4RE4+n\nwTe+66cNUW7TbZcPO4tcTluQGgVgFCcvxGiyRD0uaDdW9TwY4R8wDUU8LXxa\nh5rgwj8e3GmGy8Ka90foIBWslAqVpw6fo8KxiHkCJckluRPoQ5qYZ9H8LnEk\n1P7aU/6cztqR3B1UXcWI2QUBfBRP6/I55lEcbzf66S6ltc7a0gdnT4xddqdk\nOaBDCr60BIiK3eYpPiy9bdf721ORqDp2VKLMWLPpLY7E5A69amYUfC8J2vyv\nigUIkA0J/S1Hh+xLTVHQDAHZyhnN6/qw6IT8ONqf2J5CSLGIrYDCjiz45fM4\nJ2NzQm7OxP4UzSZU9niSfarEwddvuYVBv+7jIpij28uP95zVi8nHCXQ+T2Nj\npFQU9Oo0gCvbwyuKxJ3bm42q+K95aAqQQSM8Rk2ieFCZYWmx3gDR2ZfsJjcO\n5qu9WbpUMOpHN+bzF0HaoxBkFsp0Y6jJpMsqE8y+b1eujgG5obFVuv7H1vPb\n8Rp22ucdEtb/NbMLLUHH0P/DIm/OhsFFXQatPuzVwRk9Po8Nf570NYoSAd1r\niIjs\r\n=LPsT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcF9jPEd73goVuAhP8r9AaKxvJR66KcBRvzKgxAhtuwQIhAJQp0wf73Rz8pgAMz7N+ArwD8Q+tRgBZflERlmoa5uGO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.b184bc1c.0_1594315960514_0.8901189613749645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.b39fde62.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","@material/mwc-tab-indicator":"0.18.0-canary.b39fde62.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.b39fde62.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KU2YIN0992TKCx0YnHlDshVkMG63Lc4yaMCs1zDmWJkeoam3TpuzvMJP7fiK8AkcRG7IjooKdhuhnGf5pHpbHQ==","shasum":"4edbf339a4fcacc93bc23ab803a2db86e2ae67ca","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XxCRA9TVsSAnZWagAAJj8QAIhGr+BwCNfG83RdVdZM\nxDi632TGO0B2U1PWUk2r4JfP6wuUc+YS+bdgSrU18t0mol5+PoBM0Ig5rZv3\nRgVkGJa+sjpcGO4MrWzZTNA0oQTpS2/CqAPwONe9t7qwhY16uFZ707sLvwHJ\nDdUhdkYJX6yzq4o41Acqjb0gt2rra2lToVtX5lyxc66XqzdxTHqvbTLUtLdo\nowRFqvQ8SrVZQ0QHzsDIgEKy3wWi6rMxAEOFStZtLWn3ktUhBxkL/wPlZ+Uu\nrKOtdLgLrrjwa0/3BEieTGTKFcdMksLw8r98ZJleSAO1m1Bqjl17RGVYWy+s\npuG51P6tkBIu5jid5MmCD6WLtH5/0t0FOzadcr538/F7GFISzk2wot8nHH63\ngC3rPBUdz/4sCxm1YE6cnQdelXebpE/3LFqV9WYGRJXp/6EaXob7T4Vzk3uy\nmUP91UK1Oh53iumkofqeFsf7SvXsoxAgK76okU8QpAQunnGq0bAp8nh7C4Kn\nLKMfU7BLu5BOxHRg9p0jepiZGyzqS0FU8UArdk0BamHe8llTRcmnjf4iKwj2\nxXaB8IVVVZEFKivzmBEoLIjlJTrvKp8t9HDyfM8YkWMmMKwYIaqawTSTULcL\nL4f42il3YjAGGRLQRenzKLdrHShW3LsHanpoZjYX9HQ7UETmhvX5ldNrOnxD\nZEAY\r\n=HBCv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMVLK6yUIPDvn80lQWSyTUTAn6POlBfwlF4SZtlfyNOAIgVTPYDxbVFFXPQKaRJ6SJcEAWmY0RJk9fAVWmaJDVe2c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.b39fde62.0_1594316273426_0.04840699538386706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","@material/mwc-tab-indicator":"0.18.0-canary.dfdd8d6c.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.dfdd8d6c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LBw2XF0j6Z2IzIhVSCJb+hrsN8JDDlLOTEDdczElERDyj1+2gEjXJy+YownF6+lSbD2fW1SxFug+HQ2bsr8/TA==","shasum":"aee6dcede6c30c19c414bcd8464f069a09c83376","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2E4CRA9TVsSAnZWagAA5moQAI95m3mfa3hpTyDCNeEp\nnLwF4Izm1sseJneqdnADgLBsqVsz+fgCoPLiYzupray0gvmdJGOG6p8j4Z+L\nhhsKY9xiczwcl9PYzuC8gjBG61R0plIWGMtJUNacOEa62tJVr+tW0QKi7Oov\nhodBs32UIKNGH/jAHYefi2b1G97kDsdhDYsmlcVSUUXQdjObKsIAH+MiwuT7\na+Xnan684xtD2zK2SexLWIWFYIvYaXlhxjE30OyiWf6LM7IkfYtiTv5pB87V\n09KoOIsf+WTGvhFr+Ht8tUYeI6Ajl1rytFbnInzzfB/7oHtHDi3l5CN3EoRg\nPK3ObWqyqHw/UTpumlvr1d8eB9PaF2M1UsxxYLbqVFGjy9+GA2Kx6nUCJIOT\nPboNXsUjdNtWg5Bb2zmRiMZzKHKT2MACvCpAHZHTA/iwMyk2oi/E6nsOHkV+\nrcW/uK351l8FAsclmqfUFRTegKWfKL+WPOz4RppY9O80pNyB4ohR5x95t621\nXiapMPEv7Hh9F60Nuw5T9G1XG5dDTdyC5j241LGQbVaFLm8vcZdW9n7dFvLb\njAxxeYb6jyloAlw1skfnQ4KnzQD5cH9UICPWP49XzmPpnI2YKh8xVS2Hi/Ib\nHQcUoYnCwtaDN/omsqpN9+gfJhbIt78Qi93GU0AMGoqulpQm212+qBgkG/CO\n7lZ9\r\n=Ffim\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1kaq5k4wInL7molIDt1+oCCWFby/iLBmQqQ17T7XD8AiEAtrsAxYizftVEk6LVptYBVojXGSAASzoLqpZCNyqJTXI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.dfdd8d6c.0_1594319160176_0.5751614624542902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.11cf2694.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","@material/mwc-tab-indicator":"0.18.0-canary.11cf2694.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.11cf2694.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Kuq/Wh55pD0XxuVcnzlWpZ73N8Jl4FkoOVi0HnVzbEo5oDJYKQ0j9NZ2e6/rqkuXR1kYXAZnPHL9XbyzX51aSQ==","shasum":"a327e7ea42529b53eec7ce9752a194f8b992ce0e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4F/CRA9TVsSAnZWagAA2JQQAId+jPJfW1rXC4BUINJt\nkcc+2aUhrruhhBOMGTd8OWRuVHXvcRe80twF1g0HDsCFtowAsoz9gDYTrRfZ\n+BoYzfeqwyieB3vZ4ZyaGSUrICyAnv2VfASwjGALrO8xOQbAhz31kvc+4Y4F\n3Bv/8ZmotENS8bh43CNuQw/o3Yyk9YsCCFP+KsC6l1VMbWx9lOqgRaYAQEHM\n6np0UoUG/2hLzGaL2eSzobTTzA6R/BuzAmMKe2ASc7i5DbdB/4aG9es5WjMs\noBMZxnbKfHh2b4ChAs2Td6ZFzKzgvngTYdCs8rch663NfEjImwrqgSsX/zCc\nwaB3bQ9y0/D8ViP2PJ5wrVBCDfrRrLI5r+r0qIHZHPmAIXMaIdQJDCZjrion\nnJ6y+ae8Qo6ym9QED9BkZEnh6uNUZ6m3F6TBPUHsgomHhAUt2nlDw36yFohd\nDQD+FqIShpSHuR+HP3kFwj9iUvAKa1sAtwFoEh8V27/Gp+WRNVln6Ui2gBRD\nUdMutscdLBp84Ej2RvZnmWJQ2XnzWtCKBatGs8xDtcEk5cdqjFC+GOwpYVYv\n9e5RbKGbehGFFD6VzfuNJ7VXslwb7yMAFRnnX6qmW5PXnFJgkrxUD2EzWG3X\n17EkUGF9g0i+FDqvuvVv0jd108T1wi1ewfuy/a0NcH0PnPLKuG32AKIOWbAs\nJKoU\r\n=khSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrzvOeQGOzC3yvvvIqUQLcTRq2N4nlkmqXZ9d1y95PiQIhAPYBkFn97BGuT4E2SNu2Gr5sgxOHmqZRRQRL5tKbB77k"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.11cf2694.0_1594327422745_0.4874554704212102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.436d66e9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","@material/mwc-tab-indicator":"0.18.0-canary.436d66e9.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.436d66e9.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IY6k2jIAzG7d6U/A4AKjWmp84YddvB9V9/ISUTeWA+jahPrqtHgXwiKOQIfRyR3wph9lPgE8XwBu91luFq9dsA==","shasum":"776e650f6f9de07aeff1914f4b506a7a995f8553","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KhCRA9TVsSAnZWagAAVdkP/RKmNvLFaftdrvwcyruQ\nxHAhWzTqek1P1KxxI8unpWVZV/hBhLsxl30QTo7UHZEfmZiiDQ/W1osih98t\nottVSQCGAJABlWPhweocsdGtFEEqzNYsvnKIAH1kg67ATDtoncv1WGYz+A9k\n32Ih9WQV2B/ZQFc5pH7DBiRx/+3rP8AHq6TuUoTBylchy3sQbxhssg30o+vG\nk43xsirG+GVLghqeEZP4BlXj6R6duR84xTcgS/INgv2TqyCssGXHhtb+anhl\nA7tksQFnlXdqe3umyxrw46gvzi8hsBtUCrJAAPi0InJL1xla93tPAq650/1U\nk090H1pAHmCJzQHv1HRCoTWTYi/ZEUIsymNLhrogDrJPAjg1qilStdBQJ8g7\nVkXF9SZ3oNC2npBpaHcn1qlgfdBevjxAWZk9FxQPPObMtqWP7//3PScfVcDj\niB/tO2N7MmcBB7mFpJlka/HQoSozpmRp1+i0vjOiRmt8QJZt0AutX9iy221b\ntVXoYmv1awOoFubWN4vi1KPtpdHZMWuW0vpucDzDBsXxxoFUedhWMzui9475\nFxsZb6Id+gOkvjDRPbWu572bs9CNhqeeHijfR9YEKfju9jZOTk9FLnhCVJtp\n9MQWzewp4GBOTzNbigVtw1xKqgGD2lDpUn7UAZKdlnI0htb/uE5q4Jr9wOs2\n5Juj\r\n=pNJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhWIk0K97imM/DNz6ysgx33Ja9ofe0q5id78Xnjcnq6AiEA6JO3DimccuxYrk+UygEl4IchmKA1DRFR/tN20eom7Kc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.436d66e9.0_1594327713264_0.012956262211589298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.3a44d36b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","@material/mwc-tab-indicator":"0.18.0-canary.3a44d36b.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.3a44d36b.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dqY/Iq52yl2cylMot0qS/+3T4rPSeKbrnjOqU6tBfa8BCtX0irootfu4X9+DeTgHVL/UrAdTDXA+hDTe8bfpfQ==","shasum":"a2b9e1c4c570dd42c96143bd902a41bcaf6de1d8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hOCRA9TVsSAnZWagAAMQQP/jDFi5WacP6w8QQjCN51\nO6dWcE0KzEAO7LRK1tu7VfIBPB69xnAeouCggrxH5aEq8B8noq5vLcv+74Qo\nkOFvPP4lPWYchLZ5UEYFulBF4Ikbas1Uj6piDUnY1v4rrLYjEdftPHb9eclT\n6dLgtnXAsmIDPHlP6r1Tg0N45IDwxzIibKwItUVFMFHQrb++pVO2uKRLtdgo\nh2nmZWOQbEuTTyjjycVzLvTZqYrbw5Aid8rDVgOewDMVMHHi+BawgRiOX0NU\n/diVjvlegmzZehnz9Jp3iygY1sum6EBq90GDOpPvckdQd1Z+V6hglSqUZv7V\nA3I+rpPaeb8uqRUHl8bM1M6YtcNkEERXSoPSoOg3VZK5xQjviywJrXfFZO5x\nhFatIoidqgsaB8vERgYUhZcX9p1DXWJaXkuwpWwGtsGdZqc7k9T+/U7Lj4Sa\n3JPuS3MM9LnTknZ9qvgQVElvf/RNLEUH+5j5hOUJ/zWGV9PzFZMgEkbYrMaY\nWRqI93LngxrIGy/LYqopgzQ0f+RU0QbK0yJEXE0qP11/Cuu0FPRvmm5bT3xx\nNLl0p2OjmQYtt0EwtJqDVEcbr3UeiBC+WZL1S49X7+ZI+iw5EY17UESB9SKD\n/eLID7G1XM4rD+2ao8Kiu7tR8XfPcivgFoqU8uMfZ0vLjRIR1syTKnEa9uTZ\nME5I\r\n=SLH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATqM+nNL/IXvuQTCI8aPyumsCZOFMlKYKI/GiTrd5qnAiEAhHkn61U17AkgHV2D4d0zbGynOI10ak+1U7pXOUNu4Kc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.3a44d36b.0_1594341454492_0.8731449303341452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","@material/mwc-tab-indicator":"0.18.0-canary.ec11ae6e.0","@material/tab":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.ec11ae6e.0","@material/ripple":"=8.0.0-canary.1e7cb6198.0","@material/rtl":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SvZZm5XQPiOLWfHdxEtYpQRdu/uhbQ2dfBWCXb08bLNLDtwGpN6OBvEXYOYTv/thnYVj7wSu3gQOG/FKaFYhKQ==","shasum":"a84a3404902d8ea059e8d50d55456a1813f33322","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsQCRA9TVsSAnZWagAA/uoP/1AFDxmU6Os0GgO5p+71\nW/3wLxwStSN/MMHUkR0TsaDFgRzNUzx7B+fyiNHOnfvTRhPXK4mPtJEybeuW\nZfuT3mWVpHmXqvNSakTOnJNZu3FQiXZ+DjKB5GyHW1QHfTjDEoOIrWPqAjvx\nsMoaEHgTWCIMJAWr946saQSeVx7Ndr6eRAg4RkW4PUCpCPS3Q7DDCljExyNH\nkY0fv0bcayeQAzvCGfKOZ0jML2h4y1vaYgrvnGJEAMW5W8G9fJ0nFbF3EWwV\nqvKN0Cl+o+YCljU67Z5yMd/YMqeZFMJgSxmZZyHK+zX+nwZSKUcAEmILxtoN\nGecwfSWSUqxvKueNZqqBcBCMWHV9OGLxk8KLecI42QQyT/tQOsoLtqLnnDhQ\nalYQDVe8QG6hf4B5qsr20CorzqWz2Ksi7KaBRybBeeZM7738j1p8ucC6fNI5\nihNyUakyhDVGqnsrijBGMawDIsSyqXUEknRopcS1z5cb5BIcILL/PILnwKBA\nfSeXPsIfNWEeZSS4gWrrIQkhNccp+JjHv65hSx8R2lM9tRVLojEQFOFmg5Bl\nE3EFUekvYdwsY/J9VX39C9jySrNRwsadzQPzh2+R4usA1YSZm3co0S8r+GW2\n+wnaT+69Q5r1DzmrSD0LBeNXED66e4RwqinrIV6wu9JdghBaG+ZBrboZ833J\nAxXe\r\n=0ExK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Mb8uPWZiGGbGDtLRSKXzzaciBllARnpXsqEkksbOjQIhAMEf5b1MFQBs/AEe5a58sscqfFDAObM85ioVxX5khFHM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.ec11ae6e.0_1594403600136_0.8923207034650926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.17f6cf27.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","@material/mwc-tab-indicator":"0.18.0-canary.17f6cf27.0","@material/tab":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.17f6cf27.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5m6M3KTsCOHVT1bkZLk1DXUN8Z2iEvKX/u4vmoLjMzv+dyLPoXJcdR063h4dkcx9QXMJ4eZSCZ7UxXsOa0tqBQ==","shasum":"e8c84a2a677ab3df847324c1a25b345c0024a22e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRdCRA9TVsSAnZWagAAAtYP/2SIaytt8gW605penJgD\nKEmY8GjWmLwXPj5fUbcYudjZEx5xXPIYc4l6GxcKm/u8Tdm84MrNYL0UohQL\nCExuiw/hDNlCM/oxMuswByrI55AqcpkDSyTkV2QRPmKFz+q+Cy8wjNYaRagP\n+Zq09zevbZy+YJ86jctpfnFiFZfCs3Mx7qkILQXr+5BS+u4aVioTuHA7KgEw\nqC+eifJk69VJWbvqp742+DvJpfDAn7slw/s+xAqb5SsL+QHpZi2d8ySLaqKW\nUwo1VGKbGEiIQ20vdUTmwnOR7fPxZ8w5FGiaquHsTIJX421Ws/oYtyRaULsV\nFPpAgEoaAqLVTFfU4sc5AieyYSPDz/Voks0UtlKCRqIWCMikomws0s81EICN\n7NI7pUZPQVsI87xXQmyA+bzWwkUEwhPbocTjPuOduA1cDPXgi0asx/5G0Az1\nvXGy/k/z1ZEh8kSXvLDNH5xCcaR4JaayrVrEKruszxU6Ccm5BxenSIaRUPo7\n39FTneiofrzb4ToOxVENsGjqKF4KajsP3uk0eXt15Y9HyY1YDikj+byO1rQQ\njigw/q0uV6MvpaleizXxNhu6rPHN1+9SnxGUB99XDtXEdYbZ7X5KVdDxC9C7\nU1epq3w4uQD03lwgTy++HRQTLboBDZE2CXmDI3YEprF9hp2/nIBm5lm2CPZh\nvvXH\r\n=OH2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3Gcbnj5NmXE12WlUvlZlinhLYd4pMiL2NJSXHbaWWOgIgKjC8V/CY9ew5xH3EK23i1OiqLboDDQA+5YiXQMcT1og="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.17f6cf27.0_1594405980776_0.32859270445868627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.efdfbc21.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","@material/mwc-tab-indicator":"0.18.0-canary.efdfbc21.0","@material/tab":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.efdfbc21.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-T132CjvCw2JY7RcOi0snDqm6+803cHH3BK4e1FE6tNcfx9H6/wBEU+sOG59VFS4dQfLD7H6eqkYiO35NCclz8Q==","shasum":"7048d2572185eeb5f8c1650abc1556f744639c73","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLciCRA9TVsSAnZWagAAkkYP/0vm3x091rI0QpAVjBMH\nQMiV3ylQq4/D3QpBZyJd3Swil3J5TKqE7UdZaIrsiq2rxQauJJNNmZrOCHYM\nHUGyUKOUC2f1ym6XLjvzq5JVFtb91poyWW6iNpB+b8+HPgs2WnjVBqpYCcJm\nw3ggT87cTxrlXZZvWOqYlMRmO7mFbH0xpCZrUha6RqeqFDpwHDhx+xG6wGDk\nqqWi2nHjNju06ve8Pwq496zgxJOyq71gQBD3Gx9+8uAp/23B+cxF+iPb97sS\nZjpxZFjXoxVI8ukXtYuroK9VSrmEBCeXrTQD/ArN5mBGlPylWdDxvs73yid3\nhxZmYMORLw296TmMuJLvMxZOORMIWwJVObKc/fG06lUlEehkLWYx9Jiwp9Zw\nlIHFYLLNikMMLk8zaRk11kKuMbOhr5GPpgmWp7wjlMxWy4d7JHFNoSuB+UiV\nzMf6e1cvGuzR47BMc9QxSFLThEkfRX5XXe/51cTwkj6oP8+O+6mOU7K/x/oa\n5psm7FX9lpiEARQJgG6+aEx9PGtffgOjUIHlYqqp/l79y9UxIEosIVHpUyVx\nxsGRHNMEgqErAqTuB5hru6DhRUnk4xeQGhRpxyYBp16UqotZkhamEP24w0tF\nFsfURZoSzlZyrJ8ro79f092MKrURg9di/X2OwofTAGTHQXkVyBjoTCz1+ad0\nWd3J\r\n=uM1S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtvfMw5kglFX9LCCiTnGchQG/+CtmfWzSNLeIxQhfsngIgFtrxj7VlfNjTR4FOXXzeoeXqybtTcdZNeUrijHvbXQY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.efdfbc21.0_1594406689568_0.9388938001535116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.bae4339a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","@material/mwc-tab-indicator":"0.18.0-canary.bae4339a.0","@material/tab":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.bae4339a.0","@material/ripple":"=8.0.0-canary.5dac1f624.0","@material/rtl":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4LVO75Ukpxyo+710TRh5l5upIhcogkHz42xdL8QzguU7B83WWGI/okLixWRsYGrbt7rl4JLTfdUd+wJ0RR3a1g==","shasum":"b58415cb1984d0c34cd0ed5e56aee37f530660e2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBjCRA9TVsSAnZWagAAreIP/37MDdpw/181di1LuEcU\n4P3cberbQN9xpQyIBttdy1puxlz0d8UCeCgJR0HNJDvWDF+8zRlBlZ75AUrQ\nQVCjwbliJclVwecgczmDoghAPEgJjeYHWyLM6Lkid+RKBolpq/svOTe5mPNf\na26tFpYL6rcpUdPGzpkQXc73xuz3XeAeHuPnVJiMzNClj0tsuuTKxEhPCwXy\niz7zFFaPPkdHKnbmxarW+e6N3yqtKjPk2aBIUGxj4cAz7cuv8TftghcaWHoe\nFCW/zbmYg8wpaObQjPLFYiiXaAjIbBs2yCXH9IaCkEHdWLXT7Dj2z3xuEVyQ\n/mZIW59V8mapuUGbMG4R1oEYn/EIM8V2/Joxx5+hhmw5LW46C1ae+qQ+GIdr\ncaTSPFfwa+4xEMDpkV5qRqOGs2mHgPE0LIDwy2590aWp13AbGgZh+B81wDM0\nBc5NKjvpnFZsxuEYrWMNrBf0NrwDNLSP2lrQKgMPrxDA+dlkeEQ+WQ54ggRW\nuq26K0lAVF75cJJ84E8qaJK9o7J3sMTU9rrqm9ZEjmGesfX3NbMvP2powa19\nZHpw3Mo2/Pv+FRVTL7ezUcrPlQ/LUZ1Z43wW4fMPQD/ep9ESlAHOeUzasC5v\n+clXfJCbUjP/VAGQY2Tdcacm/GuuD5CkXvjpEDt07td0U5J6N59wTtXvgW1r\nZVXt\r\n=zDy7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyWcK3W3EIf8Yf05PI4ZFEDKTnCVM5KnJc+/WFcHZxYgIhAJSczZYPN3r4hMv3T2m81z2qU01e/Ibd/o8lwv/UI3QI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.bae4339a.0_1594744931450_0.8618516935593334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.28eac13b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","@material/mwc-tab-indicator":"0.18.0-canary.28eac13b.0","@material/tab":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.28eac13b.0","@material/ripple":"=8.0.0-canary.e6e23019d.0","@material/rtl":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qiOhmZFNX4sR6a0uQ0SHxv8Kr33BgqtEN2goGoomaykRCiH69FUd6/SSSpGwbmmuQETfjtsquK8SreDoy859jw==","shasum":"8c6f92e1fa36a3722feeee036d91c9bbbd3ef8b8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBrCRA9TVsSAnZWagAAEEEQAJdEZh2WIoPrlbk/8yXE\nugMoBA0xBhM/iCm2iDldWM+7AumUqNqpYvvNFCcNkT7n/oFgHtCVYaB9PAc9\n2qlHBwzGQiXxrpjJkzOGWi2MR+3SxJGZmfluL65D7Ov6omATX6X/Eeb7jRCt\nd+/lSzo2dS01cEKN6nUniRcijWvvyOxswjpky64OYq72Spj3RS+4ujW+C+jN\njaIIaTSfxNcWRxqlzYlIkvR3Fffpz3jMloyfJHxOOqnJ/6M8pmC20srebXiF\n3vW0Gbs0P2BHKqjUldHzQsQ1ov+fxAnjv/FwqZ6sZtv0vjaap0W4551Ku7ko\n402pKkF5zBQ4wZfvyCIubx5wb5vipD53jPYOWYcmJ8iQ6D09APx+i0WI7vzC\na0qWkA8/5u0F2igF1n/xdOz5jlpqsdFXqU1Z077glgGBVB9juCdSaqpIEaDT\nM6IVsj0UcNq8MpHJGL1DeGLJoswEEeDdYfrm83nhahQkyfd4m8bvNbrmnvjA\ndXJcyEWzi0ah0OUddcmkzD0If/4qFO6bMap8Jb7n6DEfw0RbaELNhzf+3H7U\nc8IxxTj4IzomnBqROoBLyH/iBULt23g7C0T5m6vujm7Rg6A6PWCR4J20bBz5\nOnGZb/FWeG94Z9wR4I0MP4/dePImaImeGMTCBytv0KaWoracrRnjUFTZF5vY\ndfP0\r\n=2QoK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoSGuTRAsHxwOBLLf/fZdJgZkQGWAKmsUz1zGIzS32pAiB+uslEwLvdMp8QZEn0GwinCOzj3dOtIAWtsgPFGd+EwA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.28eac13b.0_1594765418590_0.5810206529415789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.44966b65.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","@material/mwc-tab-indicator":"0.18.0-canary.44966b65.0","@material/tab":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.44966b65.0","@material/ripple":"=8.0.0-canary.ad4df58c1.0","@material/rtl":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mGBQNV6fqvSDFa/IXi++AUZUMhopAVFMftxrEm7SN5CUF38OiXDzvlkiFPTxyCLuabAN/BgU5QkMT0dcTCJOUA==","shasum":"f7561a96467c80fb058cfd563da3f94ef61ae1cd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VXCRA9TVsSAnZWagAAF+UP/0QAgBkaJalxi0G+ugjY\nPfmQOzgZ/XHs/r3CY/0kJMgwyO5LWmM1Lj9X5EdEPSbyFVdZJIM05JJTwICb\nMZ28lmHpreD3+scZQu6hT1386cgtoqs2+8oFs0HNBOdB2oNeVaoAktzbLbZP\nsInAJz0yOlgckfeba9v+BdGEBvvvXxeRy35lnw7WYW6WD6bVu0/xRNU0Sd0S\nMgubnT73nt816zYBL144TM9k7PrtZYGJ8hServHTw7UktuZ+YMAxu/csa11J\nUKYi6dQEQTza4r9deiGHNhBF6VfKscnj1WUBr2gC8D7aDN4z/d8WKb5pfo6f\nIjROygzXzHn/EPktlUYERJMtr5T1zuhA7QJE6Dr09IAtYxKjhlfFmVtFGAsO\nxUdXq07IJ2JbCmeDBxUl6ypmT6OEblAdhDGwmKR1xQouDX1ptsZesfWnzQaR\nUhHKgDeRTss+JdzJ+himoVWUAU0sYnrUt7nwF+gU74w5l45HfapQARAsBCnw\nu6qEuPGK/OxyPA4erRsyZkQNgTF8mQzmSBnym2XBYz3bEev0P6wU/SlTzvNv\nJwmpxTKhf4jue8wCSuzrBt1KAkzITtiusDjpMX91hazO22iWZ92F7gybKtWy\nUM15EFbnVT+vmqY48dNZRv0s37554rcyuN6g+Hray4/N8rx1e6aEJfy8G4Vw\nH/BE\r\n=3N76\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOFt1sTMp8WbDZX3OengLb9/cbxY5OXTKDMzIWG33M+wIhAOOOiTBxw6TSNt7+vvTQ7xVbPJx6t3U85x3uuupx0jmk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.44966b65.0_1594836311104_0.8844048166993566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","@material/mwc-tab-indicator":"0.18.0-canary.3ef0ef60.0","@material/tab":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.3ef0ef60.0","@material/ripple":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2vOSu5/r7g3c9AexOimRcQYZQwEp2eA5Yek+i/6aV9Xs3ziqFdFKsO0KlRxw11wEQxOHshQH4U5sMzLtc8zqLQ==","shasum":"9b71b40649bb45ab008c5b850c75b1eaf3c7991e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZiCRA9TVsSAnZWagAAvrMP/iVgN3b/W1NQd/IZYcAn\nuR6wpowFdwecXGf2lha1UiJAwBeKdnXjIDlZUqpXcudKv+C9lMmAv0z4/1+z\n6aw4jKmMC36izGN1OO2PhNL9/SFXvQ88IcqvCGExcnWeCTRtVb7TGXN5PqKt\nDNRusFp0z3qlw9jV0ML354mxOSPV7vNFWhtwpcTFotH3La1eYaGioJXyM6Lh\na1r5wa+9p+XPiQx2wBpfXGqP43HFkvTUb1v5VeEDuyHyQ/dYkYCJb2hephFh\neEzdBvOSUpc0l2YI8wHTh5uIYXqB+AK9CURgu3ak2cy7uy3+Od2ce0c/HApX\nQ40Mg4B/mxTF2zLpSBLR90RXSjmDpEQVEMV8YTo5xOVFj7LkcHg+9xhRRwr1\nFzEnGrUzVzKe7sAyOnbjPkjUsQfuAh3MomjLQ1fn1y/4nXa64LWX/+1n1Yic\nyiiOqEmT68/MHiq+I1UU6/oydxkharmblnR14yoXVpGz5eYdpwtwYW8CQxho\nmWnrCta9jrHywpfPBhwQYTPG059S54grH3JRn706cKobLBe2fJUmH+HAZ/y1\nwQIIoYYaByJnAK3bmmP3zRtT687aFHWhes0zm5iwD0dtW6Vn98xr1XCtZqLH\nAvHFd3srS1uzhd4YO2A/+7jt41lkp4clBhi7buXvfbokvwAbvrt/B8o0GZ7C\nHgwL\r\n=/5IF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALCnLZd4XqQrjQJK/Kkde748hTJabG6IDsp9TlDrZqeAiEAyiOD8I73q2w0TGqy9pZkty4aIOB0rxJSJdABe/UWK7w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.3ef0ef60.0_1594918497701_0.2808018867469946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","@material/mwc-tab-indicator":"0.18.0-canary.fcebf9e6.0","@material/tab":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.fcebf9e6.0","@material/ripple":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GrmC4aBvUQuccOGM6OUXeT72QC3xgnobVWJqVVzE/euDZj7KEfMcVIKVHEBWCt4J9FFsD+hVMHtXaNZBy03gYQ==","shasum":"c179c3c3ded013bdb041d3ffa87cb29ed3d56f1e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZ5CRA9TVsSAnZWagAAVo4P/RQ9AcKO1mCloJKjvmFh\nQEqG0cjE7UOgf9nfF2QFHbF0AV9nh4QdTfUaevW6UHaRkuJhoFb2+wYRoHt9\nQWO5sLVqJ1IG6qEw9MOtT4ZMBWqcDk5SVKHWrnJ0TH5kajjT6t5xoCU/+G9h\ngCbB9K2Ln9iCgO/bPSlD39nTnJhmyNBslW9P2dPRgEU3VCjaPnxL/P8rI7YH\nYa9y+Sx5vyBaLtBf6c91d4C5vM8anmomFE6TBxhJCRTgct1cHIDra0kuWEtV\nKEUCB7+prwiBvy8gHS7r6gpiiqCFvH5QarTB+BW5C3E0kcI8HvRQ24Pp5Z6P\nkSbpJ39lcp/udSxxKQIjXILO0NI+UdZ1j0iNHp4lbhuDYH3GxD7VCwLWOLGU\nA+F1t3au0hOgjSKF4m2TYbsSeZ+htJYCfjQzjekJkM7svm6rDqp2RZdzCDQ6\nA7AHCMZdMaGCwDpLJ6idyzy7k7kz5osXS2NAbGSSL1gt7R+GSErtm4VUKxM7\nMpgnDHHYzfBIWNMb7Fl1H3MtrI06c4agRx4KzHNEXhlGPLw/WwapOOrzyJGJ\nxrM/bhzpXe8C9w2TDQxUjgJPJZ8k9NZPjH6qcfa9QKJvx/pZ8MRPGjT+gt1x\nDECaai6wc6VUcbgeZpjbBFfLyX4Q7O/UX6yDhJjHjaZF0CxvcBGFGwrUWDxf\nNnmA\r\n=MeIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/pKrbym1PkEuAMkLNZJl+k5S+5U8cN0Dh3NSmU0+RpAIhAP74cnucQIMU0S0hdgMAXCtk/rLlnCTZn06KThqF1Nn9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.fcebf9e6.0_1595270776717_0.4519499186727072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.b6a772df.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","@material/mwc-tab-indicator":"0.18.0-canary.b6a772df.0","@material/tab":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.b6a772df.0","@material/ripple":"=8.0.0-canary.fb5a4cdeb.0","@material/rtl":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gaNY64fYx7i9HswyZYc3vSDIFPvRuSN4cm49Pw8KvpdLMKORTzdXwQH4pAAZKvbOdy9bxlQq3Mz9Y1ole0Xkzw==","shasum":"f242dbdba4dc1f2f083e09bcd95c137484d651d4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7XCRA9TVsSAnZWagAABb8P/Ag5BLfJJ3b7QojS4Gvb\ne9ozQhFQrH3glSXDOJQecyuXFP99qjpT9hunvMYRkSDHry1lcJonNYOTCDpR\n3RwS9S9omfT4kT+IsazSnRL052Xvx+CLvuEEP3PR/zgLkyN3hY4IyQ0v30LB\nSmRRzsBK9vZubcXP1CGDmqNACmfab+6KdEBlIYdvZoX2XMyGPC+ttUoumlvL\nZ9614kjkzvVUuebAOjxJnJ4hHF7ioZ30wLdenyV4OxS27pOHPQxZHdWp5uve\nYhYAG04ktvvBrP+pJ00bDzGwKYUjGv1Xiec60inwtUTiVQKX80j1Fih0NTKv\nehrC2XQFKdJSqBA2NRKYoy3hlfsTYGenducOJJfCSN8mi0PI7yWp2oIBRp/E\niSHbVwFigyW+QnjlnvkShJkCcbQS4tXA23eVs5bf0W7kWWwhfcLBI+HO2qDC\nMUkRSMbQOxjm1MtL0DjVRyJE5iKS9HR1L6V06A0Zn4w4oROUO+hEMx4RtyFx\nDhSH+Aqj321Yvwp9pBnYB1vruN369EvzT5msykmYyOAoRz6UKt1p11ps2dS4\nEDcDLE9DiJs4Wh9I5N5PBQ055O5cF2jwjx7WTKf5udWMydtoQxNxZgkQWtE3\nQCQsvxQ4XHK2+8BOGzglUCEcrV/KSjhg2oe7j10WyMI1AFgA1h5FNkQQNbbl\nn1MS\r\n=EqYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5exUyadbQjmkmjhMahNO+w8LVb+jfE4V+nbah4ueJCQIhAPJy/UhVKhaZcsYftrT27EdfnZXmoIyDkwb59eeEIo4/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.b6a772df.0_1595285207024_0.12217701153106297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","@material/mwc-tab-indicator":"0.18.0-canary.f6a6ca38.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.f6a6ca38.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WV7oqQXWmxsvfvgsKrKLvtiGKGu9YInGaRwoCNobcDZa4Gd0j3McBlcs9CSqmIapsYVCFT9FybXxTrPhIAblwA==","shasum":"ac8bf9053d9ee19b4971e8d3e4c9d692989d743f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqgCRA9TVsSAnZWagAA1eAP/i4FlhRrO4odBE/pUbXB\nZVAZapsJp0+VKJIG4eLkGfwLQcYmEZFGbvE63q88dxeJFw0Zufj9pQDwolz4\nUTkBsZpuVPCu2HkABtQiyp2sAoZ4x6RhcRGX8xLfigqYcslQsvnymHsglTWh\n3skgw3PSXSXlXoWlWClNbvw+A/E4xs7TgELFccb4ex8/If1yUuFo86BC1HiR\npwA0vNhnErdyd8aSesBqjWOmEhQyAlLV3zD/d7fAkVrkZxes8wL5hLQAgeUD\n6+jHy9ac0xciBCofL8VlHBJ4V8nx+vf+0uhrkcS3/K1hxHHLfJgdyjnm/uOA\nzIumu5VF86a1koLOs0cn1SlxBxvUMVhPzKIGARj8imoLxV4hOyyp8EZZMT7c\nvqQMouLhGbZPJLHWkcBVXPMUCFnmo3XGmzGCPowdVD2rKi1xkgNOH73B9CA/\nchiB+TFx8GtSBafBOrv7GcKIE8jCFe0pgLSoPHSzjq+gZ1Gj2Z/jKUb/Txyu\nZQkezZ9fZrcqkYBFq8mGDDKF2mK6Jp4PdnwysWLV5EPQdzpy/k347rDzPDIg\nYBYhH6pIeDroiRuDqCFsHBRb29OfNlQVH2yf4IsfDQ/aEFTxeIWAtjVaXMtl\nw/8KtHb1BwdT/UQBK/rdnKbuMlqSKXPfQEXw8WpNizyGfMiF27iDILhgIhy+\nqnh3\r\n=WDdX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHb9n4RevQK+o5MteZNdgU/Rqm9rRdDTa1DxRkCrHcgyAiArkfWk2D+FIWHmnUURJTJ90eDUJ/Ba3tfeTxa5ABwd2A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.f6a6ca38.0_1595349664285_0.9904119640859426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.647dd6b7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","@material/mwc-tab-indicator":"0.18.0-canary.647dd6b7.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.647dd6b7.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-my/RStuEIafo5vqoB9LGZjenVl71hcDzWKPiUAG5+zXIJVVaiLkQlpvy8YQykemRVRshVF0lWad1pnC4wP20Vg==","shasum":"8afe44926ccb9bd245878bab560c37339bfeb9a0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzd9CRA9TVsSAnZWagAACHUP/3FqgrbUGzl72Nj0Mg9L\nzrWUDXffxs203Dnx6kFa9Ei2GmMJkxYrpj/OtkVG/R3DjccI4O4BunDp/c99\nNiSeyRoW++rmgVAJ0CK1HdgJf0za6gYPeBrZMD0Q1Ss/bArqrfRGMJJYQlpq\nDqCYbzJ4YLDDsZDnhb4qNQ/OUb5V8L7T0NQbuyIPFKsC4UFQlccvk+Ef9M5E\nwpCbH1Zb4fz3JrspmHZ+htFcVGI0rrE0jCkcwT4sdWgakRSR50tgcQtOulxT\nsX2MUGWMaWbKfQKfDsVcyHjgce5Kb1vahvm9fTl2ui/8unXXMud0jJkLSokd\nHEKKRBgUHuZRMmXhzeDZBOOdZWupC0lgizVIGXtt7oxqmTf5yOCdH9akLoQC\nZGFbWcMo6ZMTkEb6zCy+wRXD8lBokSrejVH1PANRFAeH/9sQY9eMj8QQ2M4j\nqWaftw1tGmgAh6cFn4FkWmtxvmU9cQ55InL19ksPDZW+CMKXPu/wcwLKowT+\nADpLPhdaS3zSJSwePL5IopFdmW/LF3B41iH5ZHuD4M/Az6C84qIYC6kStssP\nnJ2bbBG1BIGgfwxdzjSpig6kOV2kz+vOx464N/HSaEJol9vHSzk9P23pZsXG\n6hVWdwo0YmMiZN4QvSHXjNbPVqgFn1ifRyuxl5kq/lYhfqgIumtqVdBJBmBQ\nxUGP\r\n=Ofr0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzKlK/OF4VoA37EiXhVvFBkINLbd+Kqm4oaFQsEfTdlQIhAO1b9QMUY3BaoMuNjZhg08pJnIesPcgUVn3FGoxjvnzK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.647dd6b7.0_1595357052527_0.776558386136101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.3cb7406f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","@material/mwc-tab-indicator":"0.18.0-canary.3cb7406f.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.3cb7406f.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-brW6fkJLjMv9qzeza0x4QrjeeRerq1RDHTn/U03+VZ7W3rOwQdLRoVy8sU2nwOh/aZvwfLnYZxD+mzLytqz5HQ==","shasum":"c3f61a1832b6518187d8a20847fdef5bd2602361","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwpCRA9TVsSAnZWagAAXocP/1l3nOAiejUb4NOk3nQo\ndD69+Di2W78vwcThLJ27gVq16I8J/yD8jAEm3txGzSaCwxnZ78I6TO7pWgY5\nw5WopPi5qaU0P1YOb/HqdkOgDziPEf8ZbqHf4Gc+VTKMFpdWH4e8O2wJ4XLW\nG8w7GgP2gjh8Hj1uHgt6Prv5xamqBk2EIIMXOxltoSg7nnM3R1Tu2uLTDTZu\nin9XI9HheZBgBYVpFQLO1zHgcA0YngGWBllEH9UZb/t8PQuJFOH346po5wPd\nunjAGRpueP78gnC3Lmg4NfcrCn2RQInAq8LFbvmC0Uwbo1NbPVd9AjjLIO/X\np8lkl0pSNVovK1K8CVskJ3uc05R9VPuXczElKg536VV+8tNr3+vtvlJVkdtU\ns01OWFXAVBPtnryXVAzYZPsYnQ3f01GLvXdT5n0Qe3+30u0Vb4t3pbwQ//Js\nRYfyGpeKni0DmwOaXfoNq24bLMWwwPoKOaeMG1NyY87paN6z9/y668Zlt2B8\ncj3khrs2fF/baFdOXKISBlGFgwHcUqCQAgYav5Ipqm49z1SfFjMPj2WuROg2\nGc8vh4LewCRt2J5lDZ9iq/Y726PZCbPP7GHi6GvooN9tXDUzv56eUBzx851u\njwLlKEnI0icWFcX3DgvxhYtlpbNk+OrT0qm1O6H+FqQBNbRyEWKmGoBlcxn9\nJusd\r\n=PeA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxAQ/3m0IBJJge7DhkORLaJC5u6OKoXOjMQYUZnHcvwAiEAn498Hwh2q4W4d63FYpAOIPPePAo9N+r+daM21oUcyOM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.3cb7406f.0_1595444265445_0.16096727147997592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.5717a5a1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","@material/mwc-tab-indicator":"0.18.0-canary.5717a5a1.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.5717a5a1.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pb5Pbcaiq7Z4uvaxe+yj8VTWNXa8VxjnzPz04qr19niKGYN8rQ4aOksZ0Rq5PujUYWY/U79qCOcCfDbwZQKWDQ==","shasum":"dc365db198940f94efe001b4164089413167f525","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLI3CRA9TVsSAnZWagAAac8P/id0mjVxluoKIYtz0tUl\naYwXABjy4emNosKgpZCo21EkFuRSOhTbzdI1V7T5U2N8Vn63V9TM234FGONG\nwiqRQ4p05FJCUChIZIjm+Vofl5MY+PzJuheiG5iimlfTiNSX5vZA5U+tM9/7\nPFDCPS1WMR6yu9o6WhO4VLcy9iIS94t8RGTDPWDlKALbZA7c/ZpCOvGZohgy\nLQGiNcibSJyTgI+pLbKxxGPi2e9FZ8185m4LQI8PFuW6B4iO/qFqFaKoYTwc\nRjekkXJrAcp6033Tgg6zunDxe1DUkDgXLSbzrs+9Pd4ituUcasjpTyMdVBqg\n1is8DR9nltsYeVfWamQJ4FCB/R79BLvqF8qU7oTXP5HWrMs3a1UbvYNcpe53\nMFJBc+ulh0qdoAGfWKCczyLQOh9oDQla+0jTXN1ojiWMF1e+k/B8REuCDXpr\n8H08Ir1TZDewiDuYnfSNEV2Z2bWn4+HE5PBDVxibkJ6zEwsJyPB2DZHAwyRn\nuTh2P8d3t4niawFTai408R4u0p1Th8maPi1IVD8t3Ol72xGZki61nsqZtCmP\nXN4LtdzB5aHIz7NLZsQgsDGUPEZUFZgyY1dGH0RpzHzXS7yWfdVRt3uuSevJ\nAYsBZ5ywvveKFIsiafoP6OdAj27MzYr7JTxLry4JGxrT5i3V6A2FJbxs9GPc\ndg41\r\n=zfN0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChDJrumqhEMW1sevVWUR86T68JpB6v/wOdKl+Urwa0FAIgC19Ftzku2KuUx1ye0xhn0vdBjFauEgjkTk+TKJq2NGQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.5717a5a1.0_1595454007101_0.69893362968709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","@material/mwc-tab-indicator":"0.18.0-canary.d84cd4b2.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.d84cd4b2.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sa/fkbGAdkDleA/Gn1uWDQ9l3xb2ZbkgEqoblLHlFChdI0I8mGDRkDZwsyfwlFXLInoCOV6RlkfFXIxUVCvsWA==","shasum":"686fd560b9bc5fa4723651c7b97264701c398061","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKyCRA9TVsSAnZWagAA/44P+QBH+WViij08CXnEsb03\nVl3vdQc72RowC/PG/ztxYQF1Pl/B9F4jhkvmVSsPjnESwJUi+FwIZlp+Axsp\n2YKQNh1MweIHkp4xgu6S/NEq6UQBib3NFpouJkclST4zwh6GAXxVuhvd34kx\nvYF4DXAkIvOh2i2hiCOLb0g3iX1Gx3epiQlD4/7TokJEhLsO1iyj9eyHBKhJ\nKGmCWqtRo3UBZQyyfvhIouUtY9ioD8y/OvaiuHzf86kGyv4jSnr+5PJzGrIt\nuGB665Q+98kbdAxqLuiyC/XbTXiT41I3Qt71G9ojzZA8+0HssoTYBHDYVbbI\nwiFCoT8BQN5Pym4WNdy/8tlGKaBcd7y814Narhgy7KCYptygefSv5/MK5bja\nxMBQlHaxH5fzDGuAaNPgPNA70MMmbWwbyGEDphFg0KGNRo554S1rStu+nyU+\nVNYIySwGVevK8yBEbmxyeLDprxwn+1GQjcTk0SYyLP44nKXGX5tCPQiNckVq\nsZ0fvQoucOfpnblDoQQ8xYLihk6isX8vEdW1CFvXZ0m2kD4/Z8Fi/0XSC8HG\nWJhhnjj7YV94jlyZHS5IJE2bz0OPpZScj6Jj7GoTLNckDVswO9YrPsVwJ6Ae\n+q/T9XvGVyWTRXEnT25t0dnIl1iJCAf32vH+ZvAGZCSTUHU/1HbuDI+oq5Pt\nPRml\r\n=/nd4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVrFIWXWLvOpB7sC0687sovwqC3G12MkBCq9INE6olrAiAJsyYA9ZwjVURq60BA6VHmatlXZaQvA5XpOZxVZQpfOQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.d84cd4b2.0_1595454130283_0.64106100070043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.f279e7fc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","@material/mwc-tab-indicator":"0.18.0-canary.f279e7fc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.f279e7fc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KonpD1N+JBsya0weSdIqQXcCB8k3TwjKXIiI4o+Nptn/yktYuDt0lxXNw2a5FAe/1TMxVTJB9kyUpSubpor3aw==","shasum":"f63bdbb56a8fc7513798474c4cf50e31600e9bff","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcaCRA9TVsSAnZWagAAdXcQAIePKue80U6Ifm/E79DX\nKdU2Allbjv+QRQMpQYU7YqF383Fs5KOH0bZlOsSJDC4tD9bgBRb56eRiEkKt\n4wiXmg+dLdHOrVYRFizQCo8uP2DMI415BN1SY2/R/xar2TUSX8ZcvVPUVE0d\nLvLnoFtCYmQG5W4m0G6jZQHChnyx3erfw8CEmxWmSwYm/Cmx3BGTx0p31qmN\nv9nmQzJfgN5re2nl+kTsAtuJrgvHIhJGucXb6adNDo9s9l06YWrZ73tOYAfZ\nss969zJhNxUPSGB0qJay40N1HPZGCOUji9amN1mG7Ma61Mif7IQyD7LKMMjc\n1IrPGRb0+IJKYBlGbUaWmLDtBYFM7IWqJxdmvHpmjp4+txfLsYJledIfSea9\nroOmcSbh7QD0mA0PZVcVXFEtgbFQjXggrq2PgdLpn31JNc78N8gSco69Onkg\nTnqLvqqSveImMnbL79r7hzL758pxt1BxpB2bHq+rBWhJ0jZri5uln8XrSnby\nXJtprFguSV+SJcV8f2gCPH2h2tgbVQM7380mS9ANG0tB/YtwSgM23SDyNftR\nc5rmZfkzskfnA4Q92ZjrEzjsvqEN1jOwxixyNOfkmOL/oxQ+7j1F06ccIaLX\nA2IK0dZ897fwnTUysVMglVgQt3ilaozTGociK02nKbK4G37Rxg+hhzLGEeU5\nHnf0\r\n=RGt5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEMNW/Qim1EhB925x057/daaciFH8TdmeieDmujVLm1AIgUhkwiAizDVn0uEbNzefOHjwxYVHgKfWsMASCs/P0hCc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.f279e7fc.0_1595455258474_0.33843221824492176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.f181e3bc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","@material/mwc-tab-indicator":"0.18.0-canary.f181e3bc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.f181e3bc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gJTfkw6HdyrJd2tE4VP+IMK/5Mk2d3U2q+HvFUP+GpyE4ZyrFUl8lOx8IM5A9O189um8hCSt3CnSkxuDul/VSw==","shasum":"f3c4dda3e133a92cde70214e5ea51abb6e0aba72","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeOCRA9TVsSAnZWagAAxngQAJmo/kRa2nb7iXO2jFqt\nv0rL1FwYzmMf2iS06p5uQPEuPWGQdkVBHYUIx73CYtEWwAfB3rDC448weZXe\n+1EKUQwwutGgPmigHeMj/NpJagF3XLoQB6H8rTcUL331yb5r/tRi/cHwwvHe\ncLdU9X6o4xWsJPtCYMpcbVGN5Hj+4h1i62oiBXta9S5KRVqqppdkU23JyJhP\nv8guZJuo+FTtBkAhAO0TGMo4ZjA5aQGw6K1ZRgsqpEMDvbM0c2iYg9mCSjUf\nWKSezeHRWc0Pcdw5dvjTU1krIp8n0TcOdwGx2P5bWBC6J0mCsgcubEi+iNUw\nRedprU+W55OAgz3Pe4TaMX9MasERDwuWOkTY1kJ1Q2a3hzBV/0lEla+n3t/S\nAIix//gb5fKYv0D1t91Lr22KjKpU8t1n+xbQlSunQOVBQxlBev40t4RHNE/U\nYPzTN0BxssqaaKPFO9dXl5G3xYrTUEuQjf1M4HNkeiQOmdTBx0awfUziQMKT\n5zT2ZwOLvLDjLOx1881vBNqyrfynAu1ujMN+9FX/IYS2WL+UfM2w+1LiePvl\nQWpbhcyu9g0gRhNMedeuowuNQSwqaVyfmQNWksfCnWnU53c0pCu29mVmSLsR\nquGeTSPAsDnPUMLXMsw1BsfRJTZLniIrN9VBIHmfkixKABlucJoPtbwxahfU\ntt3U\r\n=SS/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLP90N6vGwGFoNN1oEHajbQLr91Abs1Ok06PTMfDvkWAiABh/jkkI1ZjBGBwuOMPGj48j7AUW+GUKNqRGS/WTySvA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.f181e3bc.0_1595455373994_0.25247637131300604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.346a622a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","@material/mwc-tab-indicator":"0.18.0-canary.346a622a.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.346a622a.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jBMQ6CzXPAo6orGhVE++awDmPR3SBSUggECEpRoOO+zkE25gz0+UQU9GNt8lL9t3sNhn73w7KINhX/HWcrrhoA==","shasum":"641488d026a9a15223b635e0e86bf81ab825b004","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5dCRA9TVsSAnZWagAAZf8P/1wtcI1pk2yc2LiRQccv\nst/hofry9feLUMNk4LbjwY/USjpY4YosPT82CvZrAzi0Xb7DsW1En1l0QxEw\nU9uBhQUNBHwP5Pr8GBT19KUrAY3rnDgSSdxfbn45X3hcV15WDDeImWCR4yja\nCkLVf56ZO9he6BIW88gNUx39HRkOpHLa/D6qQZtOLAGdFjeMsQfyb0zHjhGS\nF5brogIU6d4vJ7+QEB/yHrff2ALS5uRivaRh13CJg+MNfN7jhlY+85M6aMqP\n8qagarReHSm4IewR8uSuucTgW0kJYsUC97wvHOmnjEffJWRwKuDojmPYb+GB\n6M4Zn+dBqNmhO3kUCJ3YkM7gTejYSAwptJ7p5XWjd8hqNLQgV1oFBfjy8Gyt\nAaDz+wuyYpigCLA51jrmlE3pjKnxt3u1S9D7Kccx//1NXV8xf01HCjQ/10Jp\nZrqPn85Zb5J388E8Wyaa5cLUtxg26ABPyhRFluQRy3DVX1FSJQgXFbZld8zQ\npxL8SZ8sdtWG++Czou+OjHpL0xTVw9HA2+0Rz2n9MVhnUbO46vPtlhRZWQp5\nmAvNmI0klcTg+oeqh8fEDu0palSvA3jL5xGsCOU7Ot5sJFQnV1C7iaiFQQtM\nU1ilZDiXfMmqkz2rKpa3UR91fPwmcuHiULWGgDRDZUZg91YdXM5PZF9++wts\nlUKV\r\n=yLOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1M+F6kcwD3m3Nxs85gjO6cgvG6ksgFcYnXnQcT8xyHAiBctLLO0uJG4ijbVQFePNjCe5Miaordjxp47O5z/qjNqQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.346a622a.0_1595461212532_0.538231087426668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.c9e8a848.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","@material/mwc-tab-indicator":"0.18.0-canary.c9e8a848.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.c9e8a848.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hT19yCvKhC4Djh2iZr6FJ5oAA03nyXStJaifM3Azt2JbywZpvnMEeLiJvkR1/DdHWIeaUoGg2YfDy2CarJJSWw==","shasum":"05c55a28ab9b926a92fbd8289d811f2f7e2a5d0f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOPCRA9TVsSAnZWagAAbmwP/iY4oZy8nSFV500eiBTR\nIAUSm5UMQl/+YdZ1eckbkNNJtoug5l1k+fWaMu5oC2Uy4EzPkGUt4dAXFG+/\ngNNYA3b6Z4gIEHcG+dXQ1OmSkAcNICLilIkdreHzVY1gIz7V39uuel6iHiht\nDmPQwXjYJfzv7+pEiPfkerpcD6EhgzKGGKioXEpMupQwybYB6K/Rg9f7LITL\nfPDLjeLjFc4QEX7qW7XvAIEbxV9prkz9Jh8IrNj63UNf5QzDSo1YilzzgW95\n3QjqcmReEazxQLBuhCR5pWI+pU6+818ng5+ayvJX4yoftooL+Itle7F5Bg6r\nq4i444Q66IVkDaPAeMhm03svL0CEidViT9MxgmmkZdcSYqC5xfpiwbYW/sGJ\nk+LsFiKQ+duMsGbo8FIRRoWJGXF49NZ8keiiNwoMb06eeDkr39cmRR9gHnw7\nFzjbE5Zw3yU4hvE46c6Odd6PfDjopP2DX9w7hjVNgV+402RL2xsxE3K/i60C\nKU6V99FA9uVhW3SgVLn1GNvwAs0IlbpwUejCtWpSK7YBx0S89a44ju88Pujb\n0Ram271RTuOib6KLfFpBznPdY4CEpWQCWdInHx8u69ZjQpUJpaTqFSyWafoc\nIUkSVh35Mymg+ejfYflPKA5eD9otdHI8jG8UjjTeBJRH8dzWSuJXAmFPimPs\nRYdp\r\n=wxuf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLuOq98ptVrAs9hZ7oRqZsBF4+GCpQj3OfLn0OKrXkBwIgcgLFVLRnjFIbtgJYOCnzZ7zmowm3YMOFc8XB9NxF9gg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.c9e8a848.0_1595466638965_0.3373928410367344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.718c385c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","@material/mwc-tab-indicator":"0.18.0-canary.718c385c.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.718c385c.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pbnZXcQjh3ahnKz/dP2N7b3FS/hns/NGP/C0FjiOnauR2nRp5970p1vf7xXRG0WZ0F/C94HdTVHsOy7rJILECQ==","shasum":"f1db155f3a5f21e2f3f62bc4c5b1b867e6fe7c2f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3VCRA9TVsSAnZWagAAVZUP/1C1IEEVmMIEkEU61rN4\nIok4a3agCcKkcmNgMWWSXC8u4vl7Qri72kDd4AmBlFaRte8wb2Spv/jNDmJY\nVItx9sgC4SL2iwO+jxYKABN89WvKrF2D1k6v7ILXdGxcCic3Q4wklWTsI1Ti\n5cHxsx59sH8FInKJqZJp36X1YR4UuBMGtMp3ALCCrdG17RYXVGiXZKmFRtJM\n+bEGWKbCCBa/AyijELYSQSuPYaKEi6VyB5vBAxhUSZ8oblT/YuPBQHj12V6V\nLGWYgl1Kd6os3HAkyBnCfS9GE0upofh31OiMCCkjMnvgU9JRZmeHjVzRODUo\nfBGVE6k7Mf0a738WiXm9LwB8rXM/BnBp4fiCOAl0BjK24MqGuPIc9QBHKr+z\nM3v/x2HpjybH9QgSyey0Vm0WeSAD4cusX+o5A5DHy8+NxTmO8KPmloU2dX2S\nfQmWqGkOJMKixfYx/ZG0j/zVCPAjtdPwbZ+MeSq0qLu5dbMCp63vl5HKQbVi\nSGg3lsuoadYqvQI9acRKEyTqK3K3tUCaPWWWgUAMP/SrXmuOaKcwdlvCLo74\n45CDRJhoVMv2ur/pMSopuDouiCnumQ9rDHobO2szD0g94mUOO2bYRyjwFs4I\ncnFj6hLpvv6Yt/LSsNswoMhZu/Fq3ObkMkF0pnZTcA/xCIGoRVnLII6TFaWb\nicwD\r\n=a4K5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJkWSb0Eogjl4Ti3Gw16xAZIg+QA6KAhtlxgRUbF0WIAIhAP2OCP9Br7gHni1IFCwfTDhWb9VcHY0bVJSO/Ky8prj6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.718c385c.0_1595534804759_0.38343571460897063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.cd516a27.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","@material/mwc-tab-indicator":"0.18.0-canary.cd516a27.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.cd516a27.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MPkK7iTv6XiAHaAoZctDX+XutnnxaS5+c5U/4sm4FUULQvr0KgIo7mai7Ncy/p1LVJ12ob+iC48VWJktJqHzuA==","shasum":"ce66019601c882e2965cf48a208319e417d54b11","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJJCRA9TVsSAnZWagAAFo0P/1Aqd23mxvxxLP5TX7a3\nAIX6Ap4m9AxgFXOzCg6eiNvUk/Zvex0PhUkcFJNNkrZhfyEp9eu4ypafoeLR\nnYgbsC2tGm2cBTeNJKG2mhF5Gb3AfEXa0WDrtwcxIo9Op8Dpl9aoz77KE+dG\n4xZi9BblVrxxK5/wQcHDZ7qcXG1aAbz8JmG56lr8ynkcXjcQXkOGhMeNl5sF\nqjeX+nGQlaxio4n4Lsuwngn8OOqoZG8AvokLMtmyoYb5OFyUcvmuN6K4+qqc\nn2E4StgMkalsXLTzjlMRB3eGD/5pHe6CpJucHLRPP1xgrdB16OLIXuaCHa9p\nJi2PlV03WrVHrC8Nd1Wde4lw9eBvrPhLwi8/mpOPzWDe1NHnwKC5hSlV9ljH\nTtgkvXzAsX8xap1NKRashdyr0t6PTdfQ3Qoe9zAGnpiqDsDg5htx+JngFJQw\nsdk6SJUNFY+PTiGfn0H2m5rMszUMGb5IIz9wAZToWg5XclatZ3YnjGXVOVBt\nRqiFAQFZFsVCPRJp+c5Zy8kqqDwxY8Gbj9J5m7siFCOM5BWuJbTSFhdjgY06\nDFclV+qSI/s8uJdDhE5jPrJ3yrJs86rCNjjqPz92RSAC9OtiYy2WeU6QLVgO\n9s+mtBVVP+QIldMCYAhkami7nB97gyq7UtI9gWaQ06p2xuWBGy749wAe7bfX\nYX7c\r\n=aAZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs+KNLLqxgZxmQ/6bAb88ahnS70EQ8srejjQh4OOdf3wIgDsKVWkrJfq41mHiaj/FeAWLF+LaA6ErPmk8msjS4Mrw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.cd516a27.0_1595617864561_0.6892322752894164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.1f082191.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","@material/mwc-tab-indicator":"0.18.0-canary.1f082191.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.1f082191.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W/RZuCvBMagsayelh7bPY+w8QJbfDVAr+fihW8KMZs+sj18tJlqY7++TSo9AJW/ZlOcjArfUYM6uCfIQfjgjig==","shasum":"7ecce5f73ce6affc68d6ec1883c914073237059e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOJCRA9TVsSAnZWagAAqocP/RlGZNFPbjvfbOqUmk4F\nGdrtELOTHz3guRvICHqlE2wL7+qxgI/8fNgdOAldTUD6pLUIGDk3kW62NZP5\neQpB1a1bU6LLkuSG6LtdV0iV/TF1Qv4GnCc5Gh8ojg27dLEvgR3pkhF+Glp0\nVrhPbBmTreezuovZMjw64wDzPeDWBwFCK3j3iMVkR8lEv4airHS6pdWci9cL\nhRuwQZhiJoumIDp6dhmX40SHiy4vgIFkQlP/+At1OBC19Hxs62WXjRJUfklE\naXKhAs4Z/jZKlkN4+nBjOlyl92fu0gIHFkD2IX6Ic75bjjJQWkTWCvpy4Qvn\nxb5Z87SEjeRWbDY2vCIS/JmpyGKgS4/SN9W5ssszQSA02yEbQEv1a56ESn5d\n+VlQC0FxT7Llv4TGNUFzb4Bp+p0M6dFYtd5xb0dq/GlwL4to5FbAEbl/1+RT\nBWx3w4gUJEPARBX88gXyaGUm1RgXOKEqBUczrJgAagZVeA7uC2Zh5glW9wKD\nApbuEpWJGvgMXq7U0JgfseF4Gx2cECQvCP4BBFbhjuHWQVfKMpGVvhrI02Bp\nju01fA1yq07VzDoqqi0HPP1h054YiHB+cXY1/3o/+mPX4RU742ujNeP8FclF\nZ44hNtOGBvK0v8p3lScwhupV/2M9zldk7Hx6lweSiRRsb6Wob6Oq01jMs9Ff\ngiEK\r\n=rNkl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMiIY4LAKDDtmXn5CziChkrBZyv2HTc7iEgaop61gH9AiA56UuMuV/s9rXa7AAyyMA31ZYmYJ754H5+WK1dKtiX9w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.1f082191.0_1595618185147_0.7572358838818734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","@material/mwc-tab-indicator":"0.18.0-canary.ea3e82dc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.ea3e82dc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9bvAiVKcJ/oPFz9/4PuGVACwkQJJQVO6HWIdJ5wOmZYL38V+9MLyRAjeCLc5h1bqGSYvoqN+wPc9tWUI/noiOw==","shasum":"c2e00661f1e6656b9bb6d15c04cdad09ed2c1b23","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzS+CRA9TVsSAnZWagAA0kgQAJIArbkpK9Bj+lDdXf7n\nrKVXeciWTtPVRE09MBWu8wMI8gpb9Jh1mNqIostE1RCcsd3Cq+jGRN0HHMYG\nPUGqOyaWg69d6K8UKEkKJktvv4MvtO0pyKcrBWDta3epoAnKnG/O+gsdgVSu\niCgmGCJicF6XYZoKT0D06nM7Ar0nsuHLOqvwRz2f5/tLHMN6lwqgo2GbbDwt\nPHn04XQycZEA7vULhvrC2Lt/9yljsH5r/yW5n3mkYbAQ3S0mqCcaI1p/Lh2U\nyq4y2R3+fQMNLmIaxn1UsMlI/7Qal51ZFmIi7wBWGU1tlttwdAT0kR9/harP\nkcRZIygbNtC/Rgk0oNOpF59nAUAE7ZQOafWRq0YwmlK/bDh1uNDjsK4YEejt\n5ze/VKFR/gRGD/RjJ6pgLpGvBEeHBxc1zirAPzWB2Yq1YWvTQt+9mVm8rOpW\nQ0zZ97uqm4utZCrGQTD/MW8f220ma4SrE4MEhfyHNO1u6IkJ1YcCa5Pw9F5z\nFSD4BMrdADsUKOzg6c+iui3H8pRpcsfiV3tsjW2de878OperFDs6W9Ev3Tlt\nErwfkzB/KbOwFlXo8ZwXBGQ+/A3vid8PNML259+kKhriBW3gaWcEZxV0UonA\njv8OMDUJs53FDLC+9OG3btXwC3G+8RXYXloXk5FJkGkj68sOcKSrUhZtzmDt\nxQEe\r\n=XBVN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDS63TTWAwxHWBlTopAd5iL3O/K+Eh1k/BBteoR648t0AiEAiNms0QJ/g+9E2YgjXb9oP02RmLzUZNWqSUJTldMP+rE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.ea3e82dc.0_1595618494051_0.6550003065287024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.94987b64.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","@material/mwc-tab-indicator":"0.18.0-canary.94987b64.0","@material/tab":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.94987b64.0","@material/ripple":"=8.0.0-canary.5511e0aeb.0","@material/rtl":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k2IOQY47PzgntUISMRce6PyIxw92bofGKDyjDHxT5DouAgCgY5XIDby8k36JrdGN5RpAhxg85SuYZo6pVSrrXA==","shasum":"1424db68d860caa9a3aa71838ff1dc4409e5fd53","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QGCRA9TVsSAnZWagAApoUP/iq8OxdYq44ClKILUWT4\nLThHgcwcvKJrK+FDinQWiYSPLKuZXkgFTDxwAZGMt+RWUB2x0qSEqX2MF4hS\nRajs1J3BCfUzDhNXqm7+E+tnDXlgmicCYhwkBPgzIANzqPdHH6M3Akllx4Aa\nHFtrq+Ui5GjkHgoHx6+zE5hAuMR9G6WaW7cUO+7BSGAVjOBZYAw9Dm93hUHy\nifjyvj9qNckTitWPHIYFaP41uCUWQFd6oCILELz0EiIqd+8NbGSu6aBudoeZ\n+2zGYCB2pA17G27h+HmRC+KGketFaGCTRhwDHFQfzqafic1Mn6LVxFGKWtBx\n4vfzTKsU6G3K0mEa/mvfblq4vNjB1Nsf2mSZCxMl/y1MXX7kdKz7A7GsCIZW\n+ZjQICkq7KbMHogiaEciDXhkDoylTuolWhmgwFBajM7ugwSQsUHKNiwdxrVW\nzR8m+lzJdip4fTMEp51Q2Gt7e9GqcI7mwI2C9eOjWboTjgfz0irgD6CKEXRx\n4dNvglWe7e+aaa5N5eacCEg9EBXgTTE+oem5mbU4PF5S+xbP0eqA//S+hyVZ\nd388hqVH+TQHD2SHrIMrfA/KBNtPZ+ufm/l8hR4L3oPo/9sgcFwhL7IueDy4\n6h5F/N2dyYEJl7Lc6IXtf9jkr+pcvog01gwDhG71nMDbJTJkhvaqfPkg0ySF\nY/cO\r\n=dlMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnGf/R8GDImDP1RGWXaG3HJG8u6jErxS09LQbFvwtKTAiEAlZ5reEyGJofBSFsHH8pPYjiS3becGWufNuWZ0D5uykQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.94987b64.0_1595622405904_0.4178105963451819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","@material/mwc-tab-indicator":"0.18.0-canary.ff49b7e2.0","@material/tab":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.ff49b7e2.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1ThhwoJ0YQbpG9dhhGHWiLdGI1TmYbdfiZ9xEimtoPRZAZLyQFcV8ipCckRcxUX36qtry/RhLkl/GQTxDx3SOg==","shasum":"3ab683c89d9d59e87e94830b0a3de7338a95db9c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVhCRA9TVsSAnZWagAAJhAP/i3Bccav0wMhSGp1tHtY\nlE/Bpd2cUeyzUwvtkmY21NAuYS7CoPbnjCfGM8jPfFKsrx8IMGa2EKb1x0l3\nYMT/nvcWS7B3RrmZPdB/lPt9VZY94L0rjjIpGKdJR677xfM64v3AQBhON+Om\nYsaiCPDOIucfWCMqVBOqV6Mpvh9aAQwAaTgwC9KzzOMwoYFJvomAN/JHlLAI\n2KMUdluiCYHgfjgFUaLpfvCNO3IldLIsLJVMpgQLRsS68bByfKhGPclPg7hX\nhtFMrekkHtT3TnYZNhKhqliWifKUrTVlnoPlFpBQepGPocCmLWLAb1hD9N1F\nlOmCbdsSdX4cRk1qo9ve0nQOYqzGcZj1w+WLgMmUSq5+a691W3qz2u01Lvyc\nHmO0apals5DU4Pp6FwIDlgd+y8qq7F+JBfML/wIGV+PSp5biB5hVC4ZxsuOl\nqMMylmfWJtPKYAeYBa7IXVi+4TDlpCHTeZX0WfKNSr2AYCBkJyg1rQ42/mfL\nq5vOHDhj/XNXEruIS5442h8JXTC/u6kcQ31OIEzxiqWeXWAR1hNAnCyshcZR\nNtxq0GHvphlRIgN5N3yJJNR6BcWXuaswmm6nvNSUNRIjQRJD0fw7JNxQSpKa\n1r6Mg8F+SSzZIaxgfUyfNCuzMn5F22yzfpG7Hzf39tr6hD9/8cHaLS3wHuDj\n22MA\r\n=bNb5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCttXPsNIPnCCZHb9mUP2HYPOxTXo6/LG4d5A41/+qdvAIhAK2RdM6lbNrlX1EpTUOelzdaSozqzifdxpRZwIK+lhgp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.ff49b7e2.0_1595876704612_0.0652927735113571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.3d334ccc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","@material/mwc-tab-indicator":"0.18.0-canary.3d334ccc.0","@material/tab":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.3d334ccc.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nvChpunC6KEmCpwkWT8SrPvGCth62zshONuesduhVSUbc4gc9TO9/995SEWnpBPBzlLcP7M0hr2Rj+toFt0g4A==","shasum":"c021e28b5ba9bd15f742a10e21b5478eb634922d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":70542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8eCRA9TVsSAnZWagAAOC0P/3rX/aTqcuGeQ0M6Ce39\nPxZ6VQrS+OJH93Y31DDQ1DjHGi5Fu4KaTVTcJ8pK/aTDDdPk+Xfs1HaI7rbc\n1A52FukF9eAlaE9EArFl2cqojvXDDCAOIXSJfrEET4WSJT8nbKuhbRJHYgOx\ncJW7ZT07hYiOmrbo9UtFRZ1KDiyY++UpTz0es/tDhPpio4bGPoVQ8JLH7J5Q\n8E5yInd0pTGQW54vTvi0bjLosreyKhgLuC8OvY7TK7oDJ0weF4K4F+T4EqZS\nVf3M9S3lA/+JlWpXFQdY+8WS/PSKtw9fdPDt3UxymQTn67jnIlUdzqujLlwp\nALee4UNpd1pJV15yBdjS07ln5WsRLnCkKGsOzfzCLU/jO80xteBVlcPmEoNU\njINvPk1UGA9MRAY6NDqd+tsvRGq1KIYF7tJZTd9BemZL0cMTDrz1VAURj8La\nl8lfJb8pf5gFvgo4h2XgjTgLLyjaw26JiGuKV2upDzHupMMp+5cIwkClMY16\na3UgvgaNLkrkCjWe6WKs17PoWeuxTr4fU5N5USWP7CcDq7lLqQ6nUZa7ZObm\ndHhkuUtTewD3UiEJy5BZneuUjqCoclNblsf9sVxr6oinMZrF71Ix7MZZQdKI\nUviwkRlq54vJraSHaPGXmeMEr63IMfaCOWVMf1OmtmJQEsjdHMfg0vP6ZXxF\nvVKE\r\n=z5SI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOdwlCHnuPtF+1taE7uwsuuDEITrvKS4Fi0hXGlN2zFAIhAIR/SFCPr2XE4qpOTc+FX63zrg1x9tX42yUpH9mH/t7u"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.3d334ccc.0_1595952926510_0.7624235638031633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.82ac569e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","@material/mwc-tab-indicator":"0.18.0-canary.82ac569e.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.82ac569e.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ywjYU8xGWGRN4s+oYK5F7kXfScmb1q73ZpRevNByvT/lfKgjw1wOlUpww1zb2e+PFv5HWxxhZsqFUfar/BqXMQ==","shasum":"11fafd0f0213d997a157a4178f1d597fdbc31f87","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGgCRA9TVsSAnZWagAAyzMQAJMrxoQPZvUcYR8tsTRq\n+27RBGqLtCSQb+QMjhZ9jFe/7eZoUR/J3hTQ4ajOTr4SCxlNbIpWGSAeA4aJ\nX+rAxPzOmIZaBkY1Dv+IJnoXNw/Rh69SYePfLWcu9BgsIxXXJtMyMYr6LIF6\nGeMruxY2oFyy2dmLmXyMXCCHnxPd1hh4G4t0V9teokC/Vs376sXzi0JrKEO3\nMOE6xc+7tZu5DDyXV8svOe0scTMsHUqXVt0wdlbe+2UXOi9DKzumE+02b5WK\nC1WKEKvP5k/70PjClVcolEBPzR57d/O2+aRJJzBjrstMvDUtEvfTCtNXDDcA\nMJVtOgo48vdZyuxIJHH4DIgId+B5HQGhhUj3WJomo5PO8JtR79zb+UohcnBp\nBpN9LnuAswQMx4rlcnoyALWG9UGdwqmGPBTt2ZS/icXTjRQgv1SqZa6BSfsV\n12sYrRl2L1WQzeLZaPsjO6MW/oW+9DPQZAzLCChM8xhhMEfZOkc5K6svdEz+\n7SuGlcm6yht50r0pQxFHNJMGcjCsieshIipciBrQlhYfKo70xKRTN3lpbsb8\n+wLKjRyBaDuySxdenc6mug1wY3NTygfNEyD+eIjep5IX0xQKKpPh+YNQl/jJ\n85Sfxx0Etuxoy9mOfulXpMeNm3l6u8Vz4hnqm/y4e2SofDMdbvh+lHCapPGL\n5GZD\r\n=VKNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgQTrLCgZJdPQbrkGhLJyjsrrrmb9hadD7Wtz03SVW8gIgI07hsxlooTEFp28xyLMIu4dWwx22RiZcriijnh13OYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.82ac569e.0_1595961759699_0.6691705178522389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.99df7397.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","@material/mwc-tab-indicator":"0.18.0-canary.99df7397.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.99df7397.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DjSDmLdi6F5IZdCa64nMvGtT6SUerS0XbT8PVJUTvmcLq7/E0WY24wSIZhoEP5yuJSI99epNj584RT4uQKcyqA==","shasum":"4f578758e13fe1033f67cfe06f3d74c53324969e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGwCRA9TVsSAnZWagAA/5IP/0aME3pu1+RtZBwTo7RI\nwM4yUbnKJeGmV4q/uiP4D8cYEqlapd0mW8KRGDlTfxXIm/Zo4JdI4rohZYpn\nDykuSSdaYJi+HpEkRNBeZPBfhdxx8Oza8pjm5l+R3xmuRgomsw60zsCJZwIU\nA2auojUvks5XlDddj6CuqbBRHDQFcAztJnzk+0OYej/QKeEkZQTp+u8+L09W\n9FHJNa8MSIksBheuL9ogdt5bbFp0zKS9TBRkQLEs+MMtts6TFZqAYVJrE0Eg\nwEdHbZGTsx3nesTkMPWokqoBbQC7N/5tF0yHVf8lF+Hun5ZmKLcErCmRULXq\npdaqFi+EkIKgevlzrelVqPsz/LzSJxALEzZVzBbNI5Rn6Q47/euS1yIhK23Q\n8hAGACwe3XyW5DjKARjbVCC6t6uHXpYwzhHuL5pCFqixcuodsj9FZwAdPsRy\nrhhWhBape7zN6a/ZfQimDHFTfLrytD91Wq97DyloKRD4pTfRDCHe1HEr9ywu\nP488CMMxUjvvcMoJ8ni+Q4NYlQGJ9J2gq3kOzJbw0nxfcutlBYEGMvpQ7X7U\nehPhdnT8rrTE7In6i2FgVYPBXFA0pltHsrCeY0pGCX+JZD6Hbk6b8ZQ5n0uO\nUWlQaKbSE/cmGr73Vwht4t+YoUc3I7dOpM/UPVa4XoTAM/H9qKDXHbpoFASq\n5Zbm\r\n=/XbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDA9vEFTyt2MdEblIwLC0yGZhr8qISXY3IBYsPQdXr/jAiEAzQtDeCgekKemsTdyOyva510Fgur7JayXlzfJgpS1T2Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.99df7397.0_1595990448465_0.2794527726425311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.45493e05.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","@material/mwc-tab-indicator":"0.18.0-canary.45493e05.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.45493e05.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-izfItkbHVQooJlGvteJJp4i60MfED2Pv3Kvk4EpO1iQNwjs7wLcIlN0R1AGE/Qq9wcvyuST3yZOamCGO01F7TA==","shasum":"0935b88d2ea81f65617f3874e3e459e47d02d7c4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8ECRA9TVsSAnZWagAARZQQAJyeOk1RFZesw+C/PwPy\n25GfuPQbdSH0kmnf9zLXQcEQxEHLwX7SgUSbxe6+yEtpP1yekiFbQQXTxuoD\n/yOeMy2/fitkBRmUW5maSftx/7jPpsH7pKbvkhIfXPhCLoEYgtw5/zige1S5\ngpZg7zl2Dztu0AviNsrLXz8AfG1uTzG4t62Ugc6C7AOyl23pN+0N8nBVima9\n77xccxBs9wD8xPJlgiTEU6ia0dlSFPxMcikJ5SFNuJqSrNlyqrF+K5Ajoghw\nPQpwtPss2PzZNvkWBH28Y+V/EMpczy3f9HBOXArzudCUVjqtJvoxNbRz/vVg\nsYbZ10F3WllKLtLr9YRDtnnaTlYANMW01zQFTCc0RJvyb7Mu+uhhrEa8QivG\neDc+R01fEyp6VdCEM0/GzMohu0hSm766Rz/a8wq8PyPJFaoZ/rdl3ewbZ6Ck\n96rVnbeaY2zeaooIfJtXdGuCYYgGCyK3r6ph/Aw+8BMsAoMupwDngruptRaY\nf6Z5yDCmIKMgwuj4Gx0yt2vHbiVsPG0eBZS2aL7qEX7XjS2+F9U6GcCHmmYm\nxi7SdtgXJE8QZdzXLVcIwvAPCUBQjHDFVwl6dowmprk9gaAzJo32mkhSVNS5\nortSIfP8u6eFa6QtD8vFnlv3Vs/vv71Nk9Gums2xfnixr79d59d8lNWj/Lbk\nG1j9\r\n=Ggyt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJkd26S1HUvZs6Jkcgow7Uww+eZwLfGZf8BNsJP4T3sAiEA5A68Xz8wA3LbFOk3GfxMfOwEmzwAm2f7nRYfUk/0b/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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.45493e05.0_1596043011796_0.8850238320675048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","@material/mwc-tab-indicator":"0.18.0-canary.f2ab0a95.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.f2ab0a95.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-e3DSx0kyL0+7jzNTJe6t5wd/JbXAv0bzWt4itYpzJbGgdf1BocMg2UVlRDt6UVPnO2rDiqPhCeeR4NxJNYUfGw==","shasum":"817d8207e5fd9c43a1dbaf7a4ba80a605a330ab9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAnCRA9TVsSAnZWagAAUokP/3SF7WFo/5VUgTcaRpzg\nZ6RmzKqUyd1BoO3Vb9u/WZj2TLPepLv7DXWAIx1kLZvTR2VhHLPZbo8pk0gQ\naT/qUi9fwlDJATwdCJSNljLvkHzC2d6cSc4JQRKyMC0ogisvf1h6KZgyW5x6\nEKkuvqjDOAnHvAXEWorTkWkPsNeFaNYvKrXMrHElptdQPHGUMNWqUgqD8fWl\nYTC6nwUaTVXVPqhqJlvR6lcyGfd3P/+tY6steK+kn3XKj7SInx9uNgQD2lIa\nxINEctKSSthTbYO4lp1PLZb+YRT2Dxh8coCd7SEkLIzWh67PCJiqxVuzLEnX\n5x0S00ScxraeY0WAeR9ee+PZ3kgPMN0eDenA1NqHLoWJu8/xsDOX50xLYzuI\njhLO6wZJUDZrz9UsYWXsI6ttf/tZ60ltWMCar3aOKOkYC3CeqSe3/kPd5bvO\nMapvY1O6LkeVN42TIj/SGVmBXTc1SfY69480X0AtVL5qu26Mwx8jJSJCVJsc\n3AtJgezQmf2AD9z/EQ7+u3Y+YOnqcsqFuPOKzwojEXSVYmDKZh3a8vh1ireu\nCTMcCLMTA/UT/jIgWMnKQOK2FPCoI3m3zeN9phDTeCvhbxdhREY6Bleq2k1J\nSS90rVJR/fVNL3AGvL77uIDY58ZLX3jHU0juy9zVOx2my9rfSt/QYDZjqYSe\nK2ob\r\n=r+w5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSQ7mEsj6d+NLsTR5g6QSN0vONcgydfEqOsr3JId6KfgIhANvmsRrI0/NJwxQH+hzdr9lOtKuw4NLAZXpMa7aGlvXT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.f2ab0a95.0_1596043302485_0.6181010611215143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.45f9eddc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","@material/mwc-tab-indicator":"0.18.0-canary.45f9eddc.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.45f9eddc.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LLScQqavx7vwKB/rFxM04U39VwdoWk0Uu9bD6oxWVlAfGao6+JtF3Bapw7pEF8vKHmUbztigth+3g4jdpusILA==","shasum":"241de3c67feb5f71a7651ff632bbf11a82fecade","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpqCRA9TVsSAnZWagAAzWUP/1RljXv4Pkjv3zw8mLTT\nXE5qsVxwzSKettW2kO+i4bmfXB1UibLSB3JebYZgw5mpCHcVzxR6EpSXohdJ\nZjiU1S11ymRg5c6lLW7/i7k9JWLkGab1KjTCfpXHS03Gp+MgSXd4CvOx04Qh\nDFhPd1iYBMp7rF0qeaQ21iyOtjffzYy/4i3Ughj+bCV8xQC9Ba5Zv388AoIZ\ni9bbGK60B16LLro0yC7mo+/3Lj4ok9E2Vgk06Pg4RxUSHQv59GKAKROkfTmf\nVGWGNaDgEGmetOG9q1vbxDZ1YYjH/Zvcd8qnJwW6UiFmwxXTSSh+DiNkoHs2\nL1ANQlMqGo6F82M2nKLElsgjjl/E61/hDXbBF2KhMm0QP2ORCKyKXxGFsf3H\n+cQK2NxHt9nAZXn6mV8a+pYFowIHhvWjsBrMSWw+XGbY5xaAqBmzKO0apjAv\nTD0jIfmFPSvk5UOKNsuYJe06l4ZsuAibBkgRexagnPiyNgszFqP+M98YTXaX\nXvp2jlebT7neq2fTR7HUUyuITO0+Ziy937oELF76N1SpcyD9uQSTA/Igaazf\nHalWaDQUJjx0XCBwbQrcOrN3pXtz8XFEUbedHZe8S/4q1SmKVDiuF5zpx7x3\nkExluqGSP6ZDtb7dg+1wYMcoPyrQ2yuYHg/vQJM83Z4+B5fwudyyuZV+uA//\nY49F\r\n=jG28\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGU9UxZSR8fHDBVOw+aT6AinEr/EIeZqUwGJZCd+zrvSAiEAhUt3xJCkxuK9qtIBxyB1dhurmaC4dIpZ+RKh3I/etkc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.45f9eddc.0_1596070505077_0.5384365255961701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.b64663ea.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","@material/mwc-tab-indicator":"0.18.0-canary.b64663ea.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.b64663ea.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-R9as7mXec9dNpAY34uPC9ilNtZOJ+oG2edM3JWGL62rV2wAYlwzS9CoeIWXGDoOUuJ5dmqb3Sx4StlYLFbN3hg==","shasum":"ed71319dbd5e3a2e3bea1149886076923464c85c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbBCRA9TVsSAnZWagAAXVIP/3rEd+T3gPS7Uj5DPAUn\nNjnBi1JO3GuC+m4YfYxtK2cIdPXq6OxcCtsMXZTC3Z24mfrfb+vDS5sc3OBK\njRBH855amdNdppTesfdKfW5qTa0WzX6MckEhmJY4yalhPYe8tVSkjLmOHQ1S\nlrzzZHmFwgeKbUdM37fko7ufIbGvzpBlxeQTwqR5A/UPFKQYJhC4gIk3v2T3\nPulEJv3LDLMr7rCcpggt2WrHhXOBwiiZjbZKT/P5Z4D9WB0m0CX0n0tDQyVO\n2Pes775u3j9u1zZv+1/3sllpHFyRelzHAy3VuHgEUKsMCVWGAy+GPlbVf84L\nkrzLxvlSclg/CPCAqroeNaODmBg9fsepw0Efff3kk9ZTjYv4Dr7+Gtgf3r3u\n5gsrlwcoEuRdpl6lkrDC5U6uZDNelOeEUqm/J9o0Qmy690T2/P5+TEqmh8Ni\nXceHmFcnkJoMWylHA9uJnNV7jXv81RtN1BjDg/AAr2qBsXdGofxlBd+Z2Fv6\nf98rRSDhEXe4ZCDBFhgRXM+e1thaC8MsqZARkPg6waA8+1lCoDx36gXdyncn\nmi3TTZ1tR0wHLj0aWMcD5H3439iaCmihRBYHEubvZAipT0msuKsy47i07Ygp\n9Zn1o1wOFtumG23PsnkseUqrZ7jStLI/HgP1tqUeq7w968wF7U6Qg6SgYPnp\nr9x5\r\n=FIm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFX1cRbfOEICPfmQht1WxA0FzmuKibVIpM0KAikjIwvGAiBiVy402QG97mlGo+ZYKZ8Tg/ViApP4yHr3cIIkkfkN/w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.b64663ea.0_1596131009417_0.8439045006071051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","@material/mwc-tab-indicator":"0.18.0-canary.9a1a4d2d.0","@material/tab":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.9a1a4d2d.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w3qU6kRU7Hw6zgwNvRIE4Ni5DrsSeLC4EHy3WZ81f/5nTSqst1ozIi6YNZlUTYhOWU7e/sO0/lAfEDkW7nirIg==","shasum":"a32cd1a07562b5f6d726fb1f10a95a52d472341a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXdCRA9TVsSAnZWagAAgeoP/iP6VJhPA23JGWI/3IA5\nJz9mGbDbxcRleciMKGecfEld0BwGGc3r3Me4o7XYFY+xMo2HmWZ3ElbK+JmU\nrhnzkavuv+fq7UCMmb+EXy5Io5j7tIToKsvvcbd5jT7JPRrjKM2eH4BwoS7+\ney+kP+yLvGmZ8bOCLjuRvha9TvAf7gUdtwoy/GUDdJFxUnxmWI9u1EiHJtim\nW5mOQanntc5NhZOtcgZ6OXCsgNk+UFe/skpDWvwKY+poZSLGMfF2gVx7Dxbj\nVEPTYwvtE0/FOc78JnEOUzqZ299AQ3hp9iTEfBQ3H8n2NXj7l4oX1ZkyFhwY\nF8s+3vRaw6GLAaKXcM1ZH35NcrBKut8xOL0C5bzU/dUBe2R00KR/hXijPfw4\n+NgBI9C/Vmav87PY8JTXNhvFs9MLhLDV6Bp9RVm0gYVNa641SO/kjnWTyJoQ\nI9xM9j1eEk1yUeKAI6CYzXz9NOKxyPU8jtZMTO+OySZNKrKDbuml4Q58/0W+\nWx39xwjVeIhefmWgODZdvIG4TVqb9yWs6FE4rGRTZPIS/xc7nXlK0yF6K74y\npvmZyuW4PE+cGCBksJKGdzQZFrneeOOge+Iqi7DWIprHsm150cjuuvkY1abf\nB2tkluIxUbAx6gK1OOblyd6wqwmIGWhWx5Sz4vmcWSwgCwNdUQPvkzUTV3Ey\noTR8\r\n=9PZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1a5bzKjCMJwlEpJGuwHO/R6+u7y0X/HNx2QjlARjtkwIgfW1C2+/+E/2fZJQGdmjJU6c4SWqW4XVJj4BnFp3BEKk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.9a1a4d2d.0_1596143068981_0.8674173358364616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.887c2848.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","@material/mwc-tab-indicator":"0.18.0-canary.887c2848.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.887c2848.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4vFI5lS9zC195U5Hg19rrCCd+iO8CujOa53n/bBga+voW9Q8zEuR8HIS4RRnqKH9D/OO7LzOofNmwQ2o6tISXQ==","shasum":"d5a7a9091d6c40f9953a604aad7fc095e94155e3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0Q/CRA9TVsSAnZWagAACKYP+gLXkxtXpzVW5Vg6qxME\nmqad4mttnPy8u+HdOZrH0T+ABg7TUr5GoAw9Q3ArM9HWEJGNpsKJ/1h6WSLz\nUsYFEnIf28REBmgDxH+cHaPfEUJDVXbwRhveRJ20SahFEvh3YBLV38dXxb3X\na+KRUd1IcVJ0M8bj1H/P6AvDbEC1hvkT/s3QJZU1X1N7n0/AS7Y3cFQ16GNJ\nazAb4u998zPbgb2dZewzy0cKC+XNqXp3U8IKBSIbiLfZ+wmmwc2tcoeAztps\nLnBjOSWe55H0sQXWV3b02urpadnstBLqAJ/jDTgyTtORqfLYp/27+2GocLXX\n032IaONbMmqseZ1zsiIvL290Oil4Pxe1K05rCYTsIawyaK9VZZN0BEYPeVV3\nsADf7G+fOMqDFJGojrvCXRWECEndwT/JMVDmqYFXHSOEx7FYtt2Eyvr7sNhS\ntCPOxwZWFQaPqazzdJG0bed+54WSfRnycaPmXufvqeXOSFEZ3oBn/ab9Bqm5\nyLdSTlYwKTITbG5gdkeSj4refsI7ZraPzsI4GbAT30oyIPyL4Wgkli1QJ1Zc\n3xpbrxmxSozLRPnM13eaRjTtRrNnIgP2841N4eprHv/yoU7dAjdWqOUvL2Ox\nATzt/kCUZgfOiGSXwHI4seBtw83JR6aF0GIly82zII/BqEb2ZFWW8LkSxuwF\nAN6T\r\n=RWHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRa8hMpELLuJ7Uu5lyYePBv2lcPsn/wccixTwdz0TJkAiEAitlHATiOGHtjeiCLjsnNDHJTsEViZvGtrR7HvVTQafc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.887c2848.0_1596146751484_0.8555997430700915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.354eb695.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","@material/mwc-tab-indicator":"0.18.0-canary.354eb695.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.354eb695.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jONHB7tTpKuRdOCOyyT7l7/judiheCMpyPkYCntpUIefuimH98vRkgru9l00X8gOQHPsNAHDlfxEuJO7MBblkg==","shasum":"5480d87c76a0352f03c8c7ab97d59355cc55ed98","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16PCRA9TVsSAnZWagAAIO0P/16AYvJ0bHcwq9CNBEHr\nyDanNPr7HhcMPAXDshsxrC2fAxb2NTF8xWnjSnwh8vybBEYeRicFCzzs8+aA\nNSlnJRBHAP67TwP/C+WdpYB//Qjne5li3H8aa4/8owgla121Jst77rxVt3J8\nCWGE+lIXZ4G6zwQ9s9zUQULgrN8rz8QKWWsfd/wFgG0cDATO8O396VP2NxZA\nQ0Efozn4Uc/4eksKSptfQ0z+IFRDtSocEZ0LR2kgo+V54hjonUYC7P1PZqgc\nPwGNrg98rJwPgTfjMOP430NlmpGEaUwubsLqj5gFRUxBwm6TD1IR0vmW3k8S\nSzUNvEotPgJt4m5N604EejTEqUYaRjwhEFhr3Zs0rf9+PM6RFTbpxBfhYG6o\n9l2toOsXVzeN8dlSIQrChtqO5mUgJChJlH783LmTQouHmcRu3eOfu2UB9qN9\nVSoji4tBMYZHJaF+lG5OGVH0LzDDTj2S2G8yGIxHAhfYgBzljpk48Sigwqth\n6ZKGBdRabnuW4K9J0iLc5acGknqQgau12aCXjMhOaDhMtPrj/sg763dM81J2\nVBVw4RBfGztwJgTMe5LHr/B2f9oRqpuNt/jYrgYTSSME4F4Q4XrwBgWAEr08\nfZLFm8+w0p/ARIh/1xtca7TqqFholWzU98Jk103Tlk4dcGIK4djoDBzNWOVU\nr9YF\r\n=kgYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnLIvGnQL5VwlC8E/jt2PRvZmsriWcquIRHDHadg5WwAiEA44L48P+Bw8i7Tj5/LJhERmnQgTWB5/zVyYfUhNbGw98="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.354eb695.0_1596153487094_0.11477242838182589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.7beb236c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","@material/mwc-tab-indicator":"0.18.0-canary.7beb236c.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.7beb236c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w4outQHDfmcIwO8bDO6Ly61IB/2cmqRJe8f5HuyaD7GhNRUZ9a5D0pkQ/EmOfx8MU2gI1erqOQB2X8UcTUTTYA==","shasum":"53315deeda5d11ef1b35e3a9ccd8872bc9e00b0d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeeCRA9TVsSAnZWagAA2d8P/jdrBbj70RFHAMFMfADN\nG/TI45YNaDnQBP+L5ERUZgZ29mZ04JFO0UbzhRH/Ii0vNbGtTSgjRNTKEkmu\nofbj3+k8HtWLvMTxQvh7uocJaf4Lu/vlBFQcVz+SIN8zBYO9f6qAYCACD4EV\nWctkZSqvK9XSswB+CLu6ezVqsECLFJIVjbe00xo45LEIb4pNKO9sWoFoTQQ8\nnf+YX9Pdg593YgKfBNNuIy3jKzA20394o968aftaWI7gMorracZEqubm+T/H\nrfRw7BVZhLepH1RViV1hM5WrLeFi3vaX7Gu43+TKojKlz/XtQqgwbYV9wpl8\nc+0WEoIGDYUjW3sGVhLlWQ1C3ouEfMgXF5K6PQuItV8IHFcJWu59q/7RFUBJ\nGajVQVOwQHC6kUVZUIKfdA4gOcBSk9lzhFM1tvEwvgh16LLewbNM1rERMhVp\nzpEg/S3+4PrcN2MfBFRMfZwv88vWchn22+QGBUXSqmVcJE0niH9lhdeBcV6W\nrIUbQZkxFKfJ81NpE4mvO+mrm9S6sbJPOY8OGVvnYn9rL0RZP+rLjoODv4Dd\ntsYPhOokLhkt/B5l/UuqpyY3tBq0/2sxpjESqHy0biXEX8WJfRbluLFXb9gI\nKiM5TwWm82RMg7V+qK9vfY9aWBlYLgutwsz2VtxQNHgHH69N7kkdSbArGOPM\nwtrc\r\n=tl9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDzmDYiDkDwDvnlr+twPFqx+kIYFlgR5W57SeevG5QbgIhAJ1atDoZm11fZyCiHz3SDiCLMuz45kxscVDSPvQEgMBS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.7beb236c.0_1596217245878_0.022290341117358725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.c44acc0c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","@material/mwc-tab-indicator":"0.18.0-canary.c44acc0c.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.c44acc0c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e9l/ViQ/W3CMTdu8/9RwZ0bgdyTW8kjFYKIM2GbcKWO9r9vsT4v5BBnNIQZIk5LKbTUaHQV9Avln5QtoD8ACxw==","shasum":"9227c5d504aeba3eb6856a7cd0664330a63a5227","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIj5CRA9TVsSAnZWagAAfmoP/RSLnczgiSV1j2SklMvi\nQm089nF4ADQUkYXSwhWwirP4kKYzvoyzkngdMfudT9TReQBTwcNDlkv1SYQV\n0oMyDIY8twhifD3ZTMox/RMzRIwCk+4EdYN2ZiGolz0xmOhmgDFgzsRFbFmY\nWTyj+xCsLFsXd4HicL0ecQ7JK5N1GPc9ET+Iz6kD5XZsviE9I2u5kqDsK1pT\nOkzxYI1+/SDnaicgL9ZTDpJ+rbdbLAjComUm5JdycbY0lftzBEAqmm8SjNAr\nKFxKwHRLbE+oxzEOfQpIzeYlhpDnXToAtUzkGPaV+HZ3CXVI33G0xPoCez/d\nDIiVRaA6KSPAWoCWSeOs+1EK1IUmxSxzYZ1Jf6TOEwFNP1QLa7l+CtUxEmze\nAFPGOEEq/cL2UGfF64Rp8vgcuMaQB62MYFVzF/41c0S0YoDs3E6Fnc1cL+lS\ntckJPCnYh7qdCqhwseplgaGoDVzTJeKgWWt7suGaUFSJDe2kt8nE+REGOs6d\nc9EPIcAbvfZoD5o3OtyXif6TXYJidba+JbrTZqbF1HkplVg6DpymZ2X3/MKR\n2Va8HTaDTP2GoAmb1/6emL9W1/BVmgv+cN6V4GA4Z5D1zvTt+nJAdXOA73Rr\nPTqrnX7gAv5R7xVgHbwTmnXkBycBaOafBUitmYJ216st71XD41GFHt0U5CsH\nrgQ8\r\n=GtDF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFUOJa2CViFbRGMiCrUKBwp4ssz2p36yL7Cj4jSgTMxAiAA34BbfZw3gK2LCrXzdOlp+cTdwFtijlRlVNIfB7Z7pw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.c44acc0c.0_1596229881385_0.8703804493203988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.779853ff.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","@material/mwc-tab-indicator":"0.18.0-canary.779853ff.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.779853ff.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aDzGD03GW9OuED9sBZofg/3Yuqd+Na1cWBdc5aOf7GmAdLHffPkbQbQmw5jbHxa41BVQYzJzBmk6Pzi3b7hAGA==","shasum":"dc82e7d2c11fa9147f5456963f7996464c64c292","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgeCRA9TVsSAnZWagAA/LkP/iIMNLleb4XyrmWRbcEH\ntAYChI0RWGB83XEwN//Kq4KCZgVhWujBcY5JXWizkIl1P3MlPMkd6bmsnRRS\nOIbGg5FKAr0N12QFCjiczqzfConOhlLW3e+TKzL0ektvpQaNtVXpU/Jcp2W2\nkgsOrq576V8bakV10xnK2PG25QicQFOw05mtnS0sHaGr6SpucgrjzW2mVi+N\nsPYHQJPfle/yATyIJNH9eMHoqQ2/OhCgoyPQAvkOvB4rhED+E11cg6RO9aEI\n0SuwHavaCd4+y3heq//NL7JZEv16ZkdIgKwBJLytF13Xk/yjB9K0Ald4xiUL\nU25/oMjcUe6BfIkDpJjJm9x0je6UADOsI9zV2q9G976hu2msEcTnGUalVQcn\nIyDsmEBXT2EEoJxtuZiV30uf436YRVgh+2IO0eOxYxLGhdbuv+HExt0C6pxK\nP8h6ZnNh+E/V0XOwopuF+1V5iyoL4ufFgxmthUr6rGOJVAEIVc6kHUoWuNwC\nq5qYhJCbyvwzz75/uIa/NCqE0Y7tGYmkTtGBbouD0Dk6rk0GwAFQE2bmhXan\nboWEuiuSs+fRuYDAjDmGmPGtQB47RhsX57JEM+NUW5hL3ntS+KgQafKiVMG9\n90VtQ5IqeVj+hJElG9QYHMWtzMCnAATgTr8QAdJ/NGEguwxG2mQ3d2GNeoKP\n6NOO\r\n=VvcP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRj4Ga0pJv7YSm8sFhMd46qfPtaL92GJbwnte4yLEf0QIhAMWJRK9sXJ6ZObsoQ+RD4FJNeg0gQHJZtyYa38ZtF5Km"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.779853ff.0_1596475422076_0.02707501216105257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.8aaf270b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","@material/mwc-tab-indicator":"0.18.0-canary.8aaf270b.0","@material/tab":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.8aaf270b.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MVmaRJ722tVb5M3LjnPpNuw2rO5iQSwYrGDWfAhkn1s+qf3ddpsdoVY0597n9UIj/frtLT3bheZXHCfhZ3LfAg==","shasum":"0bfe98537c5f9ff00e5ebc7d198e8d898268ea21","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFo4CRA9TVsSAnZWagAAZwwP/ROmMx3k8Y1JQYdaZN0t\nZvUMM2CGoo9L+ivPBNjOJzpqaJPuE7hNPFZcOPoWTx8k3fBk9ujdTrjZ8+Vm\nt8Hxde0vCDydEDynyROlm8XL0qZgSd5Gj1vnWfiPtL0SQMqkA84S1L84gWj/\nupu25vUJVu+bC5Lga26+6xVor7tl25v1bGIFMgPxe9F42Muei4sbIirQXgLC\n/fviTQtT5nzhBFP55gtbSt6++MYEinpIA0W/6WsSyoW1vmOBirn8Nua6zQQ/\nxXQEk5kZkxBPrpCGDH6uIugCujE9ZBf69h0pyzpmvFqsSeUbGh/gDAE5Juao\n6PrfeHkHhHOZY5ys3z85OiSDQpb9oQTOSZNZSclmwfhXNs208+NCr713b96y\n6kXesnxp/FQ6kg15vljeThpcx3nMEpxVStfE4rpJChjc7s/DrhsyIooDyaMg\n87tieEbk5rES/TG1rZnJoaIRF/+z3Fuw9dUgyz4IKQr2+y4ZFHPUqc08Q3uF\n3XT4jYsyLh3hSkWduoPiD4rxsTWhbJA90fZkSo1JvU1rt7Gu1euldvb6/hrs\nSPjbohBKoA1TJmZaYcUe5JwrGmHLoWV3HFN412OsyAew507IvBdZmTdlsF1V\n6Ag7xQKic5qrq0WdQa0KS82qctZSi/UF8iPrjVjZg1t/4uC7jm/UIIziEbJ4\nFzGW\r\n=M+op\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxLeeXa2tNjz1ny7qPIoVnHKYCo2abtyjc4IhxF147kAiEAlRGUriwUOnXV9Z4ijsIMh8Mv2oEO12XxK3/8uW3VdBs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.8aaf270b.0_1596480055990_0.813541861063861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.5cde9f12.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","@material/mwc-tab-indicator":"0.18.0-canary.5cde9f12.0","@material/tab":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.5cde9f12.0","@material/ripple":"=8.0.0-canary.5903d39af.0","@material/rtl":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NL1oMVoCikW9aOtuCmp1PGOpq18+e0aisESdX7XAUHMi213hUAAPJ4nzACugz+LUvWpOVxpDzAcvdugU/VQmcg==","shasum":"03877e870d52f2d8ce6e61aa3353ccffadba1825","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8ECRA9TVsSAnZWagAAAQAQAJmc0sI7XwO8VjEtQQxy\nypxREPdfF/1kkv33AC4zacjjvbLz1RuTd6CpB7I8W1kF5ZvbHrH4gSG1EfBi\n6Zb/BSY63iiLGQ/asiQtP08nBq8OecAxCR4DSHg5DyBF2o5FR3UGIfnuy1DJ\nYU/vE7RavYubccfrQvscPTIDCZnman7cTulZLa23u0falnR4z6CGfwoHiKD0\nJHqiFkm6ZUIg00eZ3D2Adau98KfvbFjRmJ2ZTj2ZAjQvT9T1NU1N8Oa6SB07\nD+vuALgzJL9hfppp5exgsXdTwxVjxph9hJxWHgBfCFze65wqOiNqSou6FoBs\nhncpsYdMvHFPYngGcwFOoogB9UasGjAhcvZrgUpepzfdRG93NHv259oGtreN\n1lBXGn+IqEp1dj2/zHV9Nz96swfPag6dtpgopqmFFQD9vNy5GY/fwQLDmoFf\n2FurxTvJGymPzI07cBV/eZo25DnHCeFnYGTSaorXAe0RYNyMgEy8Ys/zk6lB\nyBoynQxDJP4c6pAStCF/9wCLDSlwvHqLkmlALuXqBF1yuqLVt5dnBmL6vsFI\nMDnhApio1/jtA9i9iuEGVQo6/voEEa5tGRMQ0N5bGrJfGhR2XFjCuDktcs7B\nNofOkuTjrD5sbHbv7D0122JGoEATCHwsKnr6CJNfMmhhu1UsAuvdaFbVXz2a\nEUCO\r\n=nUxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDopYE401TZp+URqE8jtKXULnSwJdtMaAeSQ6VKxpgF6AIgV1ueJM/72eIRpG34wRxeslt3Bwd+zIp1SsCH6aXHntk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.5cde9f12.0_1596481284370_0.3664224548035915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.1607ec53.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","@material/mwc-tab-indicator":"0.18.0-canary.1607ec53.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.1607ec53.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IxZ0rQev1ZFVIJrSeYcf6DZ64g6bb9LDcyWrR8XGvnZvXwC506ZvEyb+fRAxjMeaC3E1ufoiEFLhimlMMP8Osg==","shasum":"953b156541eed43293aa5d4eb299f2d429ce7ac1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmxCRA9TVsSAnZWagAAProP/3fxi4zUZQ3Qm15cGdtA\nvGRQX8YflKadphiVzkhNpIdZhc761QSjwtXYIWbqT3Wxa3wZVuZLXsK/2lOk\n4h/hC7XxPvj7DA0HBlYsXvkQQHXKAOmzwteMZxgJ8e8QeGqaPtWuaznmQCcK\ncJJ9nXv68PNx679VUfchp8WPE/BHRgD8iA5IcjwYyjRKM5ZR2dNrnuUDpkzR\nXKjz45ouaaUrm2giqQd1PkW2cKI2jvuHS+CMnk/lHqrAFkaeLsbwkQvoGNi6\nk+ZBnQy3lq2zadYTkRijwe0Gw41tkGVtny/EP38p9ws1okCXeu+MOqCPBKoC\nLwmmWmjfhkw4qJtfXIeCz1q9D77Zbgku6k4nONNleDMNpRMP28A7+JBmr/nR\nPpkj4r0sNSJJOjeqcfzJsucnf6gbbuGEuxFhgaewZIT7CbL5Z7OWbueCm4fA\nRtTc/soPetcG2DlUEDEhBi0tR0XESdvTn4ced6R/YjDIeVtZmxE8R561favs\nKcwJ4vnAe4HHntHiGLD1U8vTAz4FZcy3yK03TjYZn+4ey1jGxUUr7j2zEsZV\nnPmqhIUp1inXgrsxErBwNvboCCJoEtEeQ6TUiCTMPHTu3Wvknl2xs4KjaC/F\nnjTQQBZ/X1tABjPmlCPuKgZgPadsR9y1WnMKuWJdxLf/RHKyKdgoE2dManJ7\nqosL\r\n=xl9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC34rmtaog0CVWTU3f5fhtOH5x90IhG3jVbRA93wk4vVgIgMdXed/kXqHrZoX0JiI7/RgZwhChe5WpbsX1NqiZshiA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.1607ec53.0_1596484017529_0.5633341327115124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.678b30e3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","@material/mwc-tab-indicator":"0.18.0-canary.678b30e3.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.678b30e3.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4aZvvSA1MtFRBhvm/02ruWRButsUms9xXsaU/Xgoiem+5Fu8vfEDfMtgcdRQgMyPlA24/7g/0CKtrzjYZFhFVw==","shasum":"db2e3c83060cc2cefff994e08574f03aed3104e7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqcCRA9TVsSAnZWagAAT0wP/iVEq4dhr3fvWnTA8YLU\nc3wh++OoJDTlBTag7eVMS63kqc7hXpS77EPPMPIogs0CBiH9KITKmGYq8vke\ntcIqrME+LO8zLHehrerAyQs1uIb7UNx5oTInNQbh/HmQOUoxBtryjkV59oae\nWkn4PSA6K2I7Fhb5UrzjgxUKzRu7yvRHTmUCNTkEgGZXZqHrRYPJLjMx0Q+G\nbJbzrxjohpaaXNCWzipD8oB+/UZIJqinwbPSt9cGM19HpJ0fF6sHXUyIeYXy\nBusyzDObj95HqD4SBQKom2crDc+6kDs5/fum15R/25YoKsJSv1URPHzyoW8t\nN6/+oZvvxuSip49PTA3xst/1HZQAIW6zXue8E96XDxCfbB+QeoDx+/hDsONR\n+4tYXFv3a7cua6B6l00auktPjp35bLWgTQnOip2h+5Dcr3W2MTOVSj2zO/J9\nEi/qctViELAzOgZ59tDaRnVmvFNFsYVBRz4BpYRhUpESXhBZykCthv0WXmAK\nVIojxAvh1QyHHVfULv7tWGMRkDPY16sIvvSIdwUmeTjBbxPat9XI1tvA1k7i\n7jo8VFl0Y9plTI+h3vMDNL5n412P+ZhH5s0frGYbD5Rap61WXXWVKtg3LK+f\nh7mkzCu9J6ZActZE0Jw6kwemI3X/tiHeUnL7PclCdwQtVHu9l3oSDAxAWESv\nKLJt\r\n=989O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC12MXkC93GZWvHvPHOTO5cjOt88Ufu9OwO9Nd61GFywQIhALpiMglyVYLLcKI94c6JfOk+KoKQT8MPHKTFr85C/+Gi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.678b30e3.0_1596484252114_0.6678575687693578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-tab","version":"0.18.0-canary.21c55569.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","@material/mwc-tab-indicator":"0.18.0-canary.21c55569.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.18.0-canary.21c55569.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EvtA4Rbcci9f0lQrX7gBWS0FXimH0yLdM5ceXsj6biepzRn+2m9lTrrgdOHQh9Pym4HAsdtXds3tJDBs2q0oiw==","shasum":"1150d3ffe61d3af42bce9adea402b5c39aac4476","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwHCRA9TVsSAnZWagAAifIP/RsBqcD0jRkUrZ5Swmf/\nP0zo+UX4S9cR8j7HxknlCjyS5TRHrgytK0uSDLnPhY+g4Pi/nl3ALu/ZrtAS\n2i3nvfh+LTG2m1HCr28Hi94jl0UbUAAvE1wbS5D+oVieyyrzw3Jx23mCsaWI\n6Z5Wzq3al+G+WTJKqvge/gKViEc9h8fErqOi8tLsOUAjVn4CnnmAJfifdaHn\nsDpL902pb4cXFFi7ycl6E98OTcguPxvskn0WdWkG2DUy9A9+zAq727ZPyfuu\nGkbS6H7ywzKbGHhVizDBm+0EcK5XwEYTDqtRGErnrrdOFKwU7QMXCAY9P7Ce\nlo/ULm2QIiOypdjDDXntAKKwprfuF48UeiyUUwpU85r03n/xFGtel85aw09R\n7K7tkylCmuphwhSpSrUvFuHQPB9gjSVDkyZbmvM1BcJyLqy0aOWYJDwLRr3D\ntdW8yX5CghHW2dk46jN4zYr4cv29BX45hfV9gUtnZXmTK/Y6XFOCq7jJcCfe\nr515DpQre0zBPflTzdSt22jM9G7RtSXNgz2D2b/WHsvDNK+uvmSd2ZhgP8Iz\n4Zmxt1q4AKq9v+cYTWGDvLRXr8X5FjACo8Vius16bjjMFZe744om+JS/v6Hu\nKnUwxXrX5M5OKsOMFERYJHDq0bng8qC9mGZmAtmTWaYVo+wailrfZ7FxgzQ5\nGLR6\r\n=vssJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvDb8yldqHJoE+ZHk8UBPFJoebs0WtCByUHh6Ur6amwgIgLSDxqZMWTgTXFtaQj9E1D4XhvMs4hXEhm2iAEZtMCiY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.18.0-canary.21c55569.0_1596484614891_0.888430508460442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.907d4d7d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","@material/mwc-tab-indicator":"0.19.0-canary.907d4d7d.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.907d4d7d.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y9FkI+VZ4vI4qIfVV+OdTSz6AqCYlLrFjn49b9g/YUVoG7ksJm12s9GUXa6jUI35pyFdhe5P+H78otnwmaHydg==","shasum":"a055cbbb11ef1b5b228b22698c0bef794646cebd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAeCRA9TVsSAnZWagAAmlcP/2Tmta4LjZnd9azsMWI1\nxSeGffxy4ya9mcgWl1ebLKSl59qVyImHLjBYCRnVCK20mDwoad7P5g7c84DU\nL9QF2CIg8HLdGlIRHAJIq+iH45lDflXYEjE2sWW7G5O2N2pnisFv5I3EgLnI\nrSWxOPUjnoBTd66/ka7ZO2ElqOZUlHJvXVwH3uzrXExrPak40k6/lXDTipDQ\n8eoEnW7d9C180+ZnWHSLJ2Rza2GsxC0VfOrhpF/g3vwrVrQsb5XisDFBffzm\nv6a5sasLpCZyDrM1TJoORPmVkzoV+Ei5HYZQBPZ1UOGxmIc/oT1RJMbwGU7s\n0JVwJtQlstSzCKpUaz9442wxfWOZ6GX0qqyYnSqlCHfOfaxfSyaUdX7fz7kQ\nr6GvchT6VogQvGDCr6jYU5UE2bBwf/lzSZhXe5uuZpP+83XsENvInum62K+W\ndQyrNtF6qNx4YX+22c2P0jQji1TzpF5IV4rMG59873TdgYWGDKNoXzvd8RPS\nful+ytutUUQADqglib3R0vicWFzYSKh31fCkMMJr7ttihSkAQBWWJXOq27jp\nt18CMLPkuROho236GrMcuPoJEa/B80wk352BvNmOMQVhT+VHXpeEimaVqkha\nNMXbgkDUiUgXh00B49fztmZHHiSBMvnINJJDlAZ7ZjY8M+LeYSb+RP9ndXJt\n+5SD\r\n=1hmS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWzxQnz5BVPqE9XsF8k2hgbNRDBepxXL9ArDrU+QipkgIgPQc2P1/uo56oI4cK9kfSBs3n2fWCoSb23xFdDSPtZog="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.907d4d7d.0_1596489758560_0.4787139537501557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-tab","version":"0.18.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/mwc-ripple":"^0.18.0","@material/mwc-tab-indicator":"^0.18.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.18.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-m6EvOsVBwF5CxdhMls1RkKcJGhhDO0Kg1eyi4nXxba8PHZx3KbzeMsR+VlYxo/rBrnA1tDzKv9b0H2Dn0KrVIw==","shasum":"68c07da95ea0407eab72f4f544fb02ffa759ff2c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.18.0.tgz","fileCount":16,"unpackedSize":70546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICNCRA9TVsSAnZWagAA2sMP/ijbfq6wpnga20KDO/oL\nvjweK46R0sMzr8LbO0AzyQAcMDjKEiVxXdM14cKQVJaFpseTC0belDHLZ9ps\nWXh9H/34clox70XRuPcmojsSJn4NsM0NSIssOjnO6rTxwmqymDXcTK34tABC\n2e/C+kmNFRjSYAljXPVZOEB0z7E199bbp0mvTGxdVN8FNUrliX2tCSA7/PuJ\nbNjdNsedINKBBYSmF+VPD7+nvINLvE4CmQIsw4FkBi9mY5YqtoKnKh27a4U0\nXNjFPw9JVOHnifPJ+SPnFq8ANdqMmdh6XlmD01RlzvLdKVAnRqQbKZv6eA7H\nkI4+LAVenLpGTMWBpKXFYMPBDY/90PsrILTGSdjXt3U4LRGfrjH4PVj0NRiJ\nZW6IJyVePcRlN2txdvso3w3b79GVlcvutdjTEFhXlaGOrYqL9cOrF1FV39i3\n8O8YM/8jgAcxnGgVh36HYcVLIJZSARimeTIIpjKSA+6Q0HTcH66EJCc4dEgh\nH7eXkNiXYZZX3jZOdNsicPpNUB2oruJOz2MVNm0P9Jhv+v+Bgr7+AqhgbQy6\nsA+N0QOmLGhmNDucDmI28zjau6NJgoiWwn9AUBJqTRmFu3ngYNy7JcFi8dmS\nLyyfuhwvoaAX94EFsS7zif1qmK5aaDhGfuHh5cHbizOrzQ/ZHOe3EA4O5uND\nmdvL\r\n=jTee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVCuRUrbXEO3UcYnoKdg5T3NeVeGjpI5Cz5CRJgZb0gAiEA9ztLckOymgBCu/rvrKgXwOYzDhnTPkxTbjsxEIMltPw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-tab_0.18.0_1596489868608_0.6104127041765026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.f7958e4a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","@material/mwc-tab-indicator":"0.19.0-canary.f7958e4a.0","@material/tab":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.f7958e4a.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-j4YPviA8rcMJx5iQfE4LwCRUm76E5oQhypdJE3VmSrpS9rc+3VLYuMYp4r3NutdMNK1bwGClxF3N3nYAvtUCqw==","shasum":"01be569612efc12646748895f27a75cbb656b25a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLKCRA9TVsSAnZWagAAb18P/1BmUo2UhDHb8ft2FM/W\n6F6qXzS0wKkmjT0ydgoTvu2TSPE3Es/P3hQlh12tYTmfaFDnYpy/ssLeQGg2\nc4Ag2/AZ36cmwPC8hvUPZB4yVq+wfWqKrsm9HgCCZXnmoGofmHkdaCqSLo5i\n1hiyL38Ntup1vaE5EqoXeLXzLQop004Rw1mn2kTLoAvM5WKliWY9HMmzH8/L\nANxoHNnMx330Zg8ETq/MvtOSGQeLTXc7umEeI6Msi1OdV9cYDY0D4QNf7PqD\npMXOOs+ghIDSYYvdppS5pG89+WjbnmkJm6cQZ6+ntz+KQCc1lDwlvIrT1KCR\nlUiFur6TkVlPUGPNbiWQghi6BxkVvl7J0J6Ft31aKBWbqFFat+HphvLKc37o\nsiUWcoW/5DtyasflURb25H8ZiiW3yapTRJml1TUPQqttparndA/VPgUPsXQ3\nkHYWHPboaiGtz+OIY8aC9c1etGdGFVPH/VaCug70xhltnYC9OWxJjc4nNtrB\nb2Cn5Y+oBuaTvpWj3PEiZmmC9IN1OIVmuVfx7mO+gxN6p1BQrA1J/GEcuA6u\n2apIX4p4jmvSnahn/K+K56WWmcS61OvrQX658R3baMtfKQzZmXqXV4NAbIsP\nFvPlwU00lM0Fs/SN9oIEAa0WkT4Toq2WmtqzKWM05/pdSELrZKuebg3bYcGC\nYnUh\r\n=yVpA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjUaG6Kz7QbLrZ/YAnbxoruQoE9xlPpprFG7RZ6UfmwQIhAO/qcbX0FVyHL6xe9TZMbfDTml5fTur6cfda+Y2honfR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.f7958e4a.0_1596506826294_0.49520202135164815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","@material/mwc-tab-indicator":"0.19.0-canary.f8ceaf79.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.f8ceaf79.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-C51uWsSeY+U/SRg6WgrFlmTomggeuli7FeCLN50afRoiojo4VGqEw9w0iyOhdjZuRyC+ph2Qguce6+OA1X2tdw==","shasum":"f128a2cf3cbab269ada4c3c934e809daf1979d08","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSACRA9TVsSAnZWagAAV3IQAJPg77UqCa+SYDwKQFVh\nylK66/fSC2K1QKt2HOXdG0NkDfF6154nSQ2PXnIY950k9f3Kpo1DigW1wNl/\nsPzuoQU9PMQHWjEXVXB5NImMxwpQyL7jEJYqzhyx3BHKheXfY9zql9yhMaLe\nKLZSuzeBhmQzbJArwT7A5oSMa6PClv84o07x7aYnir4XsaJGFGxEH/2asxV/\nYe5Yri5y+m5o3yXnDgJrRPvVdAkbGVqQetRTrJSq+wQM+nM8926W4pcQHjj5\nKJQHTzj09yi8BtuYt02b9GAb8RS3UoQaVG3l8fsQyb0NzvgFimt+0ibGkERi\nA5/vioLPCjnKlhW2IIVsLJqYTiZoi/2f+++U4idp7ph2LO3gDHk9xKtVzWYZ\nIdIdj5+nDXwxh1f5IFGu7Z6x8MTpl1ZuBSRVp6aG3z/JDMlaeBlnkSIxIlzK\nRgn74r0UVEumVXSOE5yWM3sy4Jl2rUEqrTgPyM5cexqExpvLIeYixM0gHLET\nHNmnGLl+IGYBb1ax/VvDtwA/TOD+tEAhlM5TNxGx/ms28918rAnCQgZQWgSc\npPfLXnPmc+X+pPoi1SEzuTbnANdiPHQxWNIaZPWXWfnsU/MDFBeuB8vWClbX\nEpZAuGQZwqCJD9y8XJXX+2bCE3mKnpQtt5ZLsx90DV9MAuPsBvOXh/k85ZY0\n9XLF\r\n=q6G7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFOap8Us1SrsGBwlzny3HX4LN6uE07+HJNalbLZd2xXAIhANeaAAoLIMtDOkkPGyBGqlm5I0EiaDHnLzwjYyoZNB45"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.f8ceaf79.0_1596568703850_0.28246945018393976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.6b9e385a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","@material/mwc-tab-indicator":"0.19.0-canary.6b9e385a.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.6b9e385a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jCEzGIfT3I+3pXwNzaLpkpw5vE87ewyGwbN+F/zzZDL+NAZ2fqr9s1KMXKH1ZkdI4xIhUt1EL/NIP4k2xeb5HQ==","shasum":"570169bf7077fcf26fd479b45579045412d8c33b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNaCRA9TVsSAnZWagAAEXYP/jGelQUkvCS8fu1iF82L\nstEJg7KmOCuPKmxOjT4mkfy5FXxv+kFeg8g6NrNgBmxeXyR10n3XnBmX2rnX\nLOeM+QJcukJcuqKJwmMJUHyVbhYRSatLniIgAHcTSWPboJYc6dqovisHJ+r4\nJm9Sf+tpOCegGFItvVdlg6/er+wc47hRrahgYlfDjtdOawjxYRaQaBLND9nh\nFWy1n3itT9d51jHWn9P/Foi8EqOvDoa7jUeHXlhkZjFIMJ0oH6RBFTAiq/kt\nfsYexO9Z1HM0e6dh1syCw1RPfV+pbVrfKnusACJwGpiOymG49CFr9J4lPZWz\nn/4zFON/Q3g4zlQ5u2yfdm+JNsIT30ZJnprlYe4hkoTbx5uAbJ7LWrO8v2KN\n6e5QZVng5aQ5fKK8v3l2OkDi4OYppbB1aLaOt1kszGuu6fQVc0rtIdfNoE/+\nHgaA7WLGsFRMeKD3O2hQP8B/eoEBA5Sbv089lppzJg1L1XnxkfvEvLMbWgZQ\nJDFSoerjDIeDxT8rr6KmQocpM4uyw6bPXBJzo7sLSiH99EHxvyk8H2FjT7MY\nGs9hnGusUSsM8XBySKhBgi2NZ6I3+uXnPtrQGSLN0YaaBShLaH7frbWpgf6F\nDS8L0PHJ4rtKqBABM7E3eVBmBrPAOZTefX4EE/Ec1mBFAgO48zSYNOqH3ZrV\nrHgF\r\n=PL0d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJj4I9Ap1apyKciVcaS2tk6oi33yHUElWXYyrmdKj/FwIgUOHcQEeiDSv6L8wWWldyM9aNadI0lE1dOeAUZzv8yE4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.6b9e385a.0_1596576601653_0.8353028430702594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","@material/mwc-tab-indicator":"0.19.0-canary.9a7e6d2a.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9a7e6d2a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0GLlnyuEIJpIINdy5TpMVvhktAHjJIOHnzFwIVBLrXpowlUD2FaolZBXeZXhzzCBGN+bYdD9HYEOQ3g/KAglmw==","shasum":"eec135513012e497d4ad2358dd36ba81f1434d20","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuFCRA9TVsSAnZWagAAO4wP/2Hlw3OhopScKE+ePiuD\n9rZAL1/P4Xt/4ZuuYzsaPxBT+ZiMS6wgDcUGo+FRBnx8prPtqGQAKrhuAja8\nDbmegeNSGLPnideYi4XggrynzuvvOnqb97d+sIhMA3h3psYnKrenCGCQ6BuN\n9DFDAmkJ2sSKqmgXVNowJ8ceC3iDkk9PjEpQkhhuvJtLkdjmCXHrIbf3gjDm\nTHuPtCS+mNaa1INtyKQhbP2Le1IbKW6JedU+ZodQpkwNRVjYq9i7P+Un54Qu\nYD+QYSW7ZojJc/Wb2zyeG0Pi2ZdQrfkwtW+ulh3sib0DQCFv1oeruCzaewUf\nmLcx1ZO1xHXff6a/IE0XtChhYp0eNAisYyUy6L8VC9lhcBVpPG8CpqSeJpH+\nEr3jHUv8vTc6pS9hMItbrFecqrw9dLRD9Vf4Ox+OU6Gl8HThl6Eq/wleZcxq\nvJLpycA3pgAqlUOSFarMsAFJm9Cc8FE0jPe3XmhEb5lbFe9tWLlymtYy3omR\n6p+ooLHrJ5WO2iM9N6xIQMsuYd50zykkEYS2oNZoWBhwVbGVbvshjwz+5Rtb\nMWW6Kk55NkQjIjB9L9kWW802c2FYWBwxNWmayIEUFr4QbM94fNxk1h795r7P\nXTeIXe7lf28T7lYMvjqKw7nD2OUqLJU2ZhyU2H2M/9xxcuS+d8VpTpLT7GxJ\nwush\r\n=uczf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEiuWcR+JUhYxbVLMz6Hx0Z4GiQ1vi4nNGiuIYZN9oEGAiB/gnzMnuSfhRNcvTWvUsNyDcUmi1vRUvuCpyZE/UuMAw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.9a7e6d2a.0_1596599172984_0.482354420077832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.188f3f1c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","@material/mwc-tab-indicator":"0.19.0-canary.188f3f1c.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.188f3f1c.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EYuxCJYv3HMar90U9XHLeyX9OmjKvQKaehq8Cjt4JWL4doS15Vf2MDiaqSK/YrSLu6cWz2fhs636RQeiVsIg6A==","shasum":"04ed8243c55d2b3323f1f58f6887a9b498c175c8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbUCRA9TVsSAnZWagAAuC8P/1/dCjX5pzRByUdy/6vI\ngNC5fSTJGwPGms9OZPY9kgtbMXJZa1Dwk+2c5d/H134vg+30y3CJPwoNHdt2\ndVxFnA1es1U5Ns4YrCWLwx/mtxbNgee7Y1XMXN4Z2J+YRE2kwUJJtNE2XoEw\n5YIWKS1wWPkrsBC1l27pu9FpUuacQQ+8hrD9CBMAgAauDB35tozO5KXD1WtG\nMRXdAcglGnN+TH0I2kP5p1xTFfzRtvwSkFfoktEPUio83Ha/YMUAgSsfoISS\nb3a7cRAjaq6BJjhVoB1upTwNOLF6hU+nj+GwdBDOq/C0+gQh2URv4Y2sawCH\nhG43Ki/E3rXfgZHBsZ1bzJUZ4ZJrqranod4ZalBOOZbFAmNaskWK8lRMtnzw\nqP7NeKNQ9Jps+8aQhTZ6uMfqYPfHx2hTxdiStdXk9GfMH4+6fhk2Dfcs+go0\nZTlLDFmZjU7tZ1zIRLRqlBV3dg2lGL1UJZwFqOhPconu9HKoBf+78uV1uoVT\nTKia4VUXCAb43ub/gNANL+DfCXw+WxJRF1ZCL+z7QjqwsxKVYLEXJK0dotcS\nbpQWzeBHepqFoL9vhviS8MoDtXiDZ17KRHSkGtyRtZhn5MHCvcKtMPJq/Lrs\nCc7f+DvqIidIaqC7JtJOE3i19pU6pgOaAyT6DpXuYFZDakIEKd5itzkYZQiW\ned5J\r\n=5NqZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCta7wirWYI5LHGVG6bYl38u1KvmgbJMFP4koZ2t6Jy9AIgfDzcATaQX+SBJM9VC/WG9hiU0aonI8iQgzQO98A9saE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.188f3f1c.0_1596651220129_0.80255396434743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.b6106add.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","@material/mwc-tab-indicator":"0.19.0-canary.b6106add.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.b6106add.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LWBNV2q3HtFmuS14rZs7mtg5k90HcB6k7Ff9XsrbzbkSXJjDFwVsq/oXVxRq9SmGM+iuClLBRKdFHoDbBQ2C8g==","shasum":"d07124f461effa0bb05415de4562bb0c806bf180","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxthCRA9TVsSAnZWagAAvU8P+gJjLOuu6VKhK18GkKcu\nNwsVhIGTSBeLmjZyv/+AOvvWKB4XqVgglxAF36y8D6ubafCtVHH4zvu+jsy7\nGAK+5lj9zpW8bNNgLlDN2MSBlnjlSUHQD7vcbLHqSz4zGtvaiAIxLdUBFV77\newOquCdcczE75IfpvmscFCGGRBfcc0HCfHCTAdRDo8KoCWrBzjikkJjqbz2C\nVbty5P6I124uOnUj4ssQCkmbY/MLCKVFsHwjYgzXIurNVzGA5JWtIhMlY0QS\nsDz66kc8GB/enDmnQOxqgUdcS5NON+aspunoHzD7V/0EhF4yRS+di+7y128u\nHMogy10nd81c7t4IBZTX3YJM+uvQ8zdWDqU1NPqarKZq+lXUvSmALprkFcFL\nz5N09vMbMhOb14NK2lzslWNut8WGEy7vWenw+cdjqsumQBSZcFSCBDxIBhHN\nHp32qwcGi0Peyc/5pDWqFbFb5Y9XOQjfW2L77R7gu0S7b6Bay2DdWubXNqF1\nyWcvx70WQ3iqyO3Jv6YZr8hgRSfUMnOD84fm3iZHvmA/v7ae+jKB7Urmu3+l\nWkUV6HLOnDBeSwd0ptIMnsyqr4twYdWXQXO+Fi71stg3vpfDXkJclOkKfxY4\nN99DtaO64dSIRqgiNrGgBLeLC1l7ZjY0PJl9cavgq38TvOQRsVi2Um8DL9/m\n5/+j\r\n=l6HI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGpKmzMXuVtz2THg9ys2UJl03EosaY+DLgqWWDwxuetwIhALdmgoggHagO8MffnEIR2GSorPwQyqyl9JKVzBNL5fLO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.b6106add.0_1596660576626_0.12552857946820728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.ebb4c667.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","@material/mwc-tab-indicator":"0.19.0-canary.ebb4c667.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.ebb4c667.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-n5Zzhjm8GyQ5GeDgtns6ZXAbA3tlOwhPkajwyF7fXHbKN4blKhfK65aLt3jFnfgmq5LjkiGM6aN1y+Vr1BPFTg==","shasum":"575e2db51f20b73b421cd418dda6f9764f61e2e1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0x1CRA9TVsSAnZWagAAGc0P/0EG0xCx2PcWLas12kr+\nVU2lHu76SGEnPUO0sneqEUa4hNvwJhqki5PPNer8UrseAho1sBp3ugezUaUr\ntLmwYXDGiNJJa9acN90wqv7aBhjDLyOfb7IlRI6C1QmARVITH5PwYeRx10hu\nHJuEQr+9BE7SEaY2o4dtzh+BpNAhxO7m4J9a2OCv/4C+nrWTIZr4QkX3nkWN\nTvPmy6uaUfoQYCzawguFFJqde/nHqkYi5PFWIFeg9KIDMv9wZwqgjQgD7qUm\nvcWw8uLO6O45H+sMm7JPPkeQxh//8bPr9C6PSubCJuh49mcgQhUYtm2f2hF4\nnJcJrvbCh3WFOn9vjhL1UhJNMgokx3Q6cWX3kPRIBjnsQlIXeSXUqg5JE2j9\nGKPo9RKj1E1+Ua08r1D3rMiKZFQMS1O9XhbLN0NMzimU7Mo6x4/eWBEtEWKB\n+FQwZzFDlRbK6HLpO1IlEdU00VFeBg40pJmC0A3v6az0bGfpCDveKxqPruyE\nrS2qE3Nj8Iu1H6tnSgfzlnBfVJGuDM7r46BuzPsNT1Scb+wjfaB7KLTQJM+p\n4rJ+9q4xgJL/LeDvto8fRE9TGWKEH6EgGymRwT0OavNU3tfi1N7r5YtmHmgl\nNCFb85LslNVBz03vvXmhtUtu8FJj8NZw5S+K3qcKZ+UxBczASG3uXyGFXKuJ\n3huR\r\n=+Nec\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClgzGbsoI2sgdIE5W640OZn1LCGTbRs4Q5wbI0MG2UfAiEA2ffsYNtwbEXwBmtxYTeRbAj1K51aPxnTZ0Yr3lGFgx0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.ebb4c667.0_1596673141199_0.5124759627567059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.aa44289e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","@material/mwc-tab-indicator":"0.19.0-canary.aa44289e.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.aa44289e.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-K8iimpJuFCu978l37sX1di0tLDD61iYCZg9r9p4pQsgvP4mDG91kV9vWxSho+19eO33x0FSdXabT7AH3Rf9CYg==","shasum":"b422fe6a3ba7d2f60e07201ad98177f0767d3c4b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":70632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEucCRA9TVsSAnZWagAADJ8P/R9J0jmSvJI0pS1SgCr6\nYp+y96GvCggUn3zFtN8N7rMCQrMYkmuqwiAWt1RPvGJZqB5ym1Az5QlaONH2\npYInSX61FWSLWj9Im53RzGWEXwLfmsr/15NN1bW+XnNmrjEAx824lIpBTotU\n8eCvnPTekAA8DpBNifzWgXVsrNDmPSDam6otbGlfMe5YB5lHJSiOE0MHJLQJ\nnGzui/p6K+lmuQSKUB0l1WcoKidDD9c4+hQUQRSS72ysvETbt527M4GRqQaf\nA2ki5y4Z198jdEgNV11UQ0AcreVPXI3AQ2v3ymZjVI0ZuJCI5ynjGEg2szm4\nwK8meEU5+kbBn1ERj8STLLMqwyuNy6j7xaOHD1A9cliDPUmDuvB3rG4Rlx/c\nMmOHY/bL/CwWPUUtozmMgIBAj7HpfW5OhqSy8g4BJzFjRRq0444BDQYAOVsw\nLvDEBfHUtQKUKemJJ7PqJk50s5zJJ54iEiQFsHAwlxXRr0yaQQh6joahDSuq\nncw+RifLRZcpD87/4U2FL7SvQiLDLWydSwI59YH16RGAc+jHojMfPYJb10/M\nID0BK12+kyTE7uvSLqwxp9as/WBxr1D0lf0h8UU2FWDQuPXXJBC3M5StmEyX\nFD8vhleOOUlHGg9b7JHfyaagYhquY2lI2v441EjdZQ5q+UbqCbBaHcO0Iqfj\noL0T\r\n=R1yo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFca3gd9LlCpAvuoWvc4Sn6FX2xXTTWZkvXCTZk5RmeCAiAj7hm2EBu0GrrQwKxN8lOSvm+1dLrGu7f2tQe3ImYNSw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.aa44289e.0_1596738459825_0.4532200612727688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.e6b0816b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","@material/mwc-tab-indicator":"0.19.0-canary.e6b0816b.0","@material/tab":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.e6b0816b.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q76b3k6LQzspByT9OjDn8M078xkbjM3PyuUnmD6j40LVjv8pk8ALnUiigWgxecvKATgYBR4Jh+mPLJ7IFz6DfA==","shasum":"e5decbc673c87f1159d1bd5bb824bd37761e9e4e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDwCRA9TVsSAnZWagAANksQAJ2Y6KIcu8rV8opKExoo\nUgQ5hLGx6ebqNzFbCYO3h+YIhVxqBKT11CZmHutp7cvKW/cnqW1pDqxmcNag\nWSBFkMRtwICzdRmTouxyBh0U6MTrVaL9cR1CRT9/7voP1fmr0ulRpWvIxfMp\n6f0nLtBSsJYjQMlmD1eRaZW0DaVnkp9hmrw1Kpf6Nphj43A/nV6gp3dngOeZ\nvswqtHQ7gMNemTFQVa2mI9+zWHNgQCJL4MF8G2ABy3sfw14Q4HgTY7m1SgjW\njtFw11rSrd1iCv+Qg7Dkgf6W6ehX7fPhfc0tdMCM7zvWNmq9woyqwWyY6Exc\nU6Wl5qZPwYGCciygt95ml9xnq3B39C+oB/Gpa9TSSTQnMU+ie/TvVx3haLtU\n2qkvuVkvYcz8HlQP6ai+VLK3NrEbENr5KxFTkpufFFSVUWnVKzY3+8EunYti\ncNDpUt8bvjM0jIU2UYKR3A2WwpAy3davznkIEAxXPlt/TBUj73qF0sF1MFgP\nji9qDpd9SItGR38raVTvnUXoeLrHvMOQT4t2lUpergnMKJT0uBwUQjnWYHQ+\nqED8XXQujn9mMIBXkyvT9iYtFsc45hmrkPGsv869pRoWetOsXsgp9nIjU4WZ\nCRJp0ZXPsOxFFVRybX9FkWTshEPbjkgv3fHK55K5sBkp9gLlDvYOX+Me8N2E\nYjFf\r\n=cKsl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPS8eYDFFktO5hVjbAUTCESZKJbcKEA9w536UFqjzIjAiEA72rOaStHGRZUHhvkfUsJLp925xmM7xlQJ06EsFfSUV8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.e6b0816b.0_1596825840172_0.23745288827300493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.96d15938.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","@material/mwc-tab-indicator":"0.19.0-canary.96d15938.0","@material/tab":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.96d15938.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-b3ZTit3KKP07awVAaaOe1fp7TRjU3gCtNCSYHHNHE84cP5nhzKnIVhFXZ095IetWjEo/2kIDR+IWEkVybyXgIw==","shasum":"91c4a2b43b9fb2761fed3fda284e0661c1713acb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmWCRA9TVsSAnZWagAA484P+gPajTcaucas8xEL8ovU\nkmQzETXnYT6de5/RQ2NDds/V6Im59NyqOlvpD2Iu4M+88jNXSbFCpzzMCPrm\nh99nAl6XV/SI8MVWELT7ihsAv3gWNE9tXuBc0AWsdlGlnL+VP1fB/OEOYVM1\nbne2bfeuLxorVLqEJqflGzubBAxdHyYJgGZAfmMGre7qYhl2UAFZPYxDes5J\nlnakLFNDbbKKHqqypAylZChvCHGclo6jmTVYXNYhZ3N7iU4Skd+2MsLvia7e\n1oxi5mcX0KNIHa2t4Ge7+yfi5Y/Lw8tTcO5kqmrPpN/suiIZsnP82vt2mZtC\nmgS4JLMvFKfEI+cGAbJwRDy9VsA+sjmv/EBlv+0uFVyiacjmoI7kCG3mfFC/\nzXlYoZSgFyPMkiSjQx6at4V510TdbwMV50DrTmGS3Zq5WlWOuqHb6S55VdiB\nR3C0yo3OIDkU9c1J3Kup5isDlal8fJcNcdlG4S0ZQyE5Zdoix3RZOHK1S37f\nilMx1cvggNcxjhMqm0gBrFnIOLMC45s7oGlJlL5tYYnzC/QaxsRY46LZegu3\nTxMwfLFKFSEKZnv0p2VMvFy9KQCQZ7Fpen42egWXY2B5730PM+DveR1RWggI\nGHIK3QIbDq7OTQMQYeloo661g04RXYtHqvKt6izr7txuRmtR+3ifav110RIl\ns58z\r\n=QSEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD68Iyn+RkGu7gRGqg2nDSI7yuZ2QBMR0ef4TYc8w2+sgIgazCLNGsNdWDwfZZuIl9vk+JYxq41yEUjyodpJ60rOSQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.96d15938.0_1596832149624_0.16837770626762394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9d991c8c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","@material/mwc-tab-indicator":"0.19.0-canary.9d991c8c.0","@material/tab":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9d991c8c.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aaD2UgtLQs5DusM/if49VlMYeUovSzwpBISpnhQInFSayHmNyYOGlHDPB9wAiLzu0UuNZ5ZewmmAxHSs8FPBow==","shasum":"3e8b88b579d115dcb3f92f82ec806795fe7775d2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDqCRA9TVsSAnZWagAAHGoP/jejobyuJkhNmGaBu3gf\n/o01CKv3msiE8pkAjdr63ADefinLVC0TCUiY1fAcoMjEZmS8cqRPpZRddsKW\nvBrUFnN0h9OcJZAZ7yhqSi2xNhBhpEwOt1tHm5tpUbMUm+uhrCIMwNnb4VTH\nOcGvUfx84dM7YZ0erB+i+DNBGQ+k+GH1hCx4+7JYh+sIGBgCvPEqE1Im3xYt\nnEBInRHpIoBKzWhFmFa0kX/L7NMthGoLAWtUngQ+/gfKxd1Y58k3R3nN2gQ4\nemB9ceuJkR/i5tHMQAmI/aJvY2HVkapV56anwciejG/7VO39Th4wL+n6sgWW\nX+k6ETxEX9lNBr+dZIGJS5RAzsjEJ+NYPllrU8K9OwvTDbo5Y4AE2SL12dgY\njwScX37FFclAYH0fTraujpdWbXDVh1TXixBokegZohrLiCIqekCOJM8DslQD\nqXmxqC4m3ZLy1EXGAi+2pG1SgrT24Ri5xes2pmgAdSB3UCntXrVa4z+kUUTd\nbxkcr6pwo8ZOZLLlkJ8N5q4QLfuHgZwIwUxEu/xym5/uKRohjdntpjefoyJ6\nwlsQhIVNHB8GQK1wa+2qcNAo4GOOiP0OG3y561SO5K6D+H6n87b+HbUr+zS2\nSpzBpY3eNzlsOxubGL4G5P/9sYgupMtwG3nJLOZrFHogrtuKQv5F784UBD1Q\nufba\r\n=nVXA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUFcPSCGuo9RooebrDbn6tAHPxpyryk1pS3XkDUiI8jwIhAISQP8sMbVS+Bc8ljQHZN3UsGnC9y2THXBVJUMA+PXYm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.9d991c8c.0_1596838122347_0.2482554012818312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.13bfbd72.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","@material/mwc-tab-indicator":"0.19.0-canary.13bfbd72.0","@material/tab":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.13bfbd72.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wzdS+eWkWeNdqzS7bbQhG3T7F7iU4Xi8ZlnVULC7LXKBfvSM4aNjafJ1ugKVMcr87g3cOGIZ9WogHxXpQrbGDg==","shasum":"08ada451b8939a525d830695c162406490388d81","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+rCRA9TVsSAnZWagAAUMYQAKUQFpu7V8RzixSiAZYt\npYep1ytUwsMGgajeo5Bf4U+LCSIGIfkgyR9mZheri8X+0OD1owsvqiUCBqsY\nVB2zlHCy2n3iIns1zDCFWN5n3Cm89PdpsLif7peXSbP89ULahZWj/VgnD71o\nnyM/Qg2vhdiKaC+XOlrNbGmHqKStE++YrQtxdw70Pev6hvUpkHupa/Y2RNt7\nSguc5bFbeYUcXNUReLt6qwn1UgAZBO86FTR0f36nKSU0hSO1TtZnn8voYht+\ns0rCSAdc27N6kAKpsTHZZgMRFTelH1ik5d1Lx6H0VzsKkYmhtr9Ys5b4Qd1+\nfEydrbuV3CjXDTTPY36r55RHaBKipCDueVwLdTsU5ibpNpDs9zIcQxwBiaSB\nd2wiFj9nn9/Gkch9Ly+BvnwoPkDaKWbtBVQC+HK57LvJDILBIfoXERKDSrEA\nZQFDCT9B5TQTc3sCNJue3DS1ZO8lz1P7sFgGsSU96GJdA3hlHoveNx5Jxvyv\n6RC4pYh2zA9DnlgZA+8cwRI68eqIw8ZMwnYKvFEtrXfFkkWPjjJV383re7pS\nXA5+XKAtHCrEqeAqGiUyAnnE51HNe6DAtlSNo3+TqgxisUG52HdKbIJC0T4l\nx9YgHijzoj+zxcc2A9izYktIkyCzs7FRWhawsDBsBCYvdxTt3Zw8D92fUoRm\n2myX\r\n=uSp6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2JPTxeu4wsY2Rqzb4XtiLE+wiBOd8eHbcuC5/ZM86cgIhAKCm0hMnbK0QyaPl0h52dEFZiq41xq4MLloec0fR71h/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.13bfbd72.0_1597087659182_0.6896864995495093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.30b1b258.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","@material/mwc-tab-indicator":"0.19.0-canary.30b1b258.0","@material/tab":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.30b1b258.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tPMH9sBNnoJT+uVA2bwRU/9aG+ZzIWiomPYm/s8QjnKYwO5gBZDRRodUS/nX9fV6kslikFD1h4sY0a9m9m/2lg==","shasum":"69ee9b973916046aa80042bd7009ce0c93455ff3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajyCRA9TVsSAnZWagAAp4oQAI7NIbq9fDhMC9PxS4i5\nlxkWCNfyDZbvFeXU2R9Ygpc/zOBJIbx3T5SWPUtCPL8Ofg6FdmuI4Z2eJQgM\nBrmxv9uk2q8wKs0UQYRnajMkIc+OAkTfIXR7AvD7eTgV52QS9k9cLnSEMX0Q\nJCz6i5fsI2IWoX6HeKKDzJmxt5bwsmZTLKcdppZUTVt5eP4bUw5GPfuluWaY\nSP0Xu0P+UHf6IAo1oQvGSrqjWYCvFz2GOlJE8ZIfaL2atqWIETXRVZv2hZBx\nQwNlw+nmT/exzXhBG0hQHyacPLviieynp9QBAJJ/u7ktMK851IGxUc8CDRNM\nXeFmL1U2TAI77L1f8fyZ2Y6kVfGBT22WuGBWlQxcYjeq5JFlgVcgR/oLx9+M\ntsP5N7HL7SRKMc7L/KTFGXsBZ/Giyx4/zJhwm8JviCDUhikgYvMgDO7DypJv\nauHpsqMJ3eKVh2+Du2b8VL5wJA13f7RDbK8EfjYdeHeH9c5m1szOkponggmO\nJFG2Q2w/4WxvlO0g9/BRm7MfMMcUxTyp1QMaEEqnKZ00+sERt3xMPkK/Nwpe\n2pKklOsaZ5b8lKwIRat6krhSzOwOwHAhRZudGdCsqpJq8oDTI2aAg09rKCSb\nwmgVbSJzHqrF3qNuS6vJWJImfHGLvsQzv2MgFs8R65C7BTuC4ztkXBMabRaq\nVguh\r\n=zIex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkJ4avaPCrTaN4/CfNsrquLNutOdAMCAEQaN1Uqb61KAiAkEbZBeXejVt/EmeGNvbPjbC6665Nl3mfg797ZDGGrKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.30b1b258.0_1597090034078_0.6380513844984013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.1583e263.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","@material/mwc-tab-indicator":"0.19.0-canary.1583e263.0","@material/tab":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.1583e263.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+8/9oOZu0OrXH+mLqDTZaO2Jecw5A+f78NT+pS577bAO4OTUFarFKcr9oB/FcHEJb1xdMFIJAKjyXK3ydKSSyQ==","shasum":"3530d244031814165522f470ee33811ae33fe6e7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWBCRA9TVsSAnZWagAAfysP/1wn32m4IgteYumZTIlO\nm+6I+QBsbopm9DI+vBmoqmxFwOrl6YgjlGQ6P2b+ASwnrwPj+qL5ci5qvFyf\ndjcThbOsazW/veKpcktKrCL5kPYHDvW+KxHZ/JVZUs4tdSV7zEbUybAiIL8v\nWsHBNbNoWw2KG43Dw4URG5U7hEKOXZKBpV+KALg5hTiue1qD/fgqUW+Q1Xrp\nZc0pu5FDNw0SkZPpNWjK8e4pLvxx853MX4PlBTJZOneQFo1K3HnppCnJoH7x\n1EYUrngDhoKjapPuRTeJwF9j8LxyUhz9GfPxS4tkfLgmBwjkkRs6WLt6ZCcT\nhA1yIGxg7xocdsDlfbJ1T0bI/mzM7Uc9cgwOi4GT3l6IHL0VQ8Eodme8r1/A\nO9NS7h6olnVH0YIagFR5pN7X5d+zzxE+HAobrawMk91ELxI4hwC2UhvMfbGu\nVXDIvbnoo3BB3qMCFddCCkT7fAnvXr/TFzkJoWT0tyzIt03/ZfCwxkgIacfJ\nR1Gd5vpttnNrFP9Xc/2fe8kEcjoDHjdaOMY7AqpNw3GygFfC1Wx6ENNsPtnt\nc8CNcmsC88xCh33Fe2Xx6CZNn/6e3zYKZK0ql8pcij8frmT1+NYgxrs25Rvk\nvJtDZed5JktcPNsTn/Cq8/mP71iBsbJZwNaEGruAxZ4Fx02ejmlnEdQjB8o4\nwP2M\r\n=0vvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjEQeIdQLs4V72i0qdXg5HfY3hbUJtFdRDz8xDWmfhMgIhAJXSMxgK3msnq9e0Y/DPjK+eKVI/0iue/IVqbBICdTex"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.1583e263.0_1597187457258_0.7824761454032747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.fefb1a93.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","@material/mwc-tab-indicator":"0.19.0-canary.fefb1a93.0","@material/tab":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.fefb1a93.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tLLULhhRmYbkeFDIwOvmJp/9LX8DNQLIlI3buSwdnLxkvKoTyIsuS0TAf2noXZBbFfTw6hov+b1LALWQz002nw==","shasum":"ca616de3d166c1019ee6b9431e3a63e5754b5593","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbyCRA9TVsSAnZWagAAqx0QAJdqslonAzMLMjbyy9k8\nfDZUyf+qfMvVZAPO0T57Mj1mbJzAYB0ri1IUkRGw/BA7oQrHYqOELeSuPr+T\n6nVX41AeXFeWHUiyWAS/fH448pbihZ134sPMySu21WwLqRnfYGpWfDTd45ei\n37NHelY2BvdlJWMO6fvg8aJq4kcHD4BCq9ALqPASsvuX6J/uWy+KazvGSxQJ\nptu8f+rQUhfW/bseNx1eE4CfLWe+1JA4OX+mbSGIgPaDbqNk4hxaJcRPJAbb\nM2ET8ucWcLAZSALRrvmpT65HsDQmiS+J8c9wRdm6pB6Yd7EWgwiCQWqzS9SW\n4Xv+RecCrQLe8e4A5MCuRDsStUv80J1yqeWDZMlD+MrM/z2gcqE8QoRpQR7d\nMsBxvi9OesP/m+dHWvEnuum4ONMsEsUS8ge9uJ2gMyw6OCmALH+fdTOUAJ8M\nriX6pdbYlfp8b3r+B5fB4HVAi1NmpD3VjAJ/tjsAwxgqlp8R9JZz7Ag80Jvp\nyh1t3QgSwIzHeJlXDsXyspt68wR/IRInqCawMXzGdi05GqDsCBoxH2N8Xnn3\nj6RndkXvHLXRgssm4WklkJ4qOWAWkNShc0yHtMu5ZUjUNv1VZVsqCzRzogt8\n9Nil9i6gpZpPGtj+pwuZ+I3SJsKaPTeXSZMvnEdvXnhTH8FM/nEg8HpL9QmA\nVVvv\r\n=JR8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA+94CBwZQc2dmIcw3fkHKnwolvy+Y6xfjW5eIS7Rs9wIgZEw5opKnx0NQSV9n5ZLCalrAiVBy31MMXZjJleZF7cA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.fefb1a93.0_1597191922168_0.7000114583089259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","@material/mwc-tab-indicator":"0.19.0-canary.1ac5b9d4.0","@material/tab":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.1ac5b9d4.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0xazyQIbwbQFj2zFWhhLQAqtjwxm1ylDxe/AkLj0rrxI/XqTPh/Dfi/4yRm1TKSMkpIYK3Pz4aO2k+GPGhhRlA==","shasum":"5ad34fd94a508faf1235862dc899b51379454231","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSdCRA9TVsSAnZWagAAprIP/0CjNJV+sv6Img3DC/7o\nUgscKl+1Iyg7JXQB8/TSHgkp++gpP3F4jxtVoaRBjhorjdypyuxyDc9oRueV\nB9RxWy+CQ9taJxhVUJ7ZYJ85Q5UzU1ozX3wMbnPPDGm93eY4QuEtEiuzo/kk\nwPsi+jpXN3PHrU8iyk+b8vyZcGiBPV4KearBi1703NumqUUTgrkBROd3BwoJ\n1d7vcHUeamDH95YT9adgoremeW1k6Obbz1iBTZvVn4NjEEhHW4eyBQXC6UVH\nHPnNNJOUaho07627jnu8Wg/AOab52C37PgPcgm0xG7ohOoiwtk5NFAWPWuDh\n5FfDJMmZQ9p2O48Gw6aV7Ob9UHVvEA5StQ1PjZ9oAoMmbntkFXKs1wS6sU80\nb9Q12SBfWblzV3h8nJnPS833tUx8VrdHttRSqktYSbGY7+wSbaNM6Ym2QaYQ\nMxXgWeuQYthEzLsIWlZBJyQ1r++m0jhpHCHqa0wdXGQaUlTrdlAOrXRkmlaI\nlCCzinn4SDaUxWulz/M7vD1UhTcv6GOOO/KG+FoQQD2KoTv4LYMSlMdkIOTx\nzaQ5I+YhPulT9OlQy/k6mWGmcYUuEccgpFgWGe2dMyRRNQpxIrA2CJlD/aSP\nFsAnb2Yo++w2ZlZGWHaG9PAL2iGJK3V2yRgN/Y9DGsP7KBkA0RJ3xV+X2sId\ndNXv\r\n=ZNst\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB8p11Pb5QCtBOiY0D0eEVcdEbkC5Wqm9FHCdxU0y0WwIgKU+puDarPk0dUKojN0hdIgkJhVaZ7fZamEOrD3bFTx4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.1ac5b9d4.0_1597256861404_0.15183292277477944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.f17f5052.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","@material/mwc-tab-indicator":"0.19.0-canary.f17f5052.0","@material/tab":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.f17f5052.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rd3Kmdr61eGOz0rmVoGdHiCYUOzsicBS1vBybJb9g/er4vU8R44Q3WrawQIb9EfhhQ3eCmPESMd5y1R18DbM7Q==","shasum":"5bba4e50ee59c85fe832864f09a7bffa270efea2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUFCRA9TVsSAnZWagAA7nQQAKJWJdPZC08wnvR/Hpfn\n/Bi2PZTmd5Y5YfkpcmaIca5KARFJXL4u59UDjOOcJhL4nNx+h/LGGU69Nzmq\n5ReLTvLq69Hy5xIzHVK3uhcR6wHDiVLw6qV2ep2Pyd2zTxaMxdBXMHaG2BF+\nkDSdCPm/QZ/iMdxZ8JedPIW+k13K0p7Zeke+a2QgchISYUu7/HLbDrk9qEjw\nYH9P5v/jx+nAdLKlvZyD7lkLfPF9AY7uag8dD64dPTdqtXNxAlV/C2uSB663\nxZ7AqUHsN4sU0onfS66dPr/dIlwvSTqUKTXma6buuBXyScoWeLJ6Re+wS/wT\n+QcfleAry7hU7ZqDKel6kwgEiWLaAx3fjnnW8SrxBjpSZl1zoc2qkYxszxJb\ntKeqEQVwSUqSvSCd1feadH9YzG4ZgS5ddfNhTqo4o3Ga0eQkd6gtXEMV74nJ\nLe0o6CIGhfV21RDSrHSl6kekz28c0GegOhHTAaNTnq31yrT9Fz6HfUHnguUU\nKvQ7jvF8p+IGmFdkaynmmRqjxosAkO/ZJKs9VSoXkh38KnpBdb5dZJYa2IxR\nywXwrqbmcxsbZeRJfNKv0xC9CDvipqfFRqeIZVr64/WBCGWXzl4lj0CxEDUC\nhwLu0vWBTzJ9iBcEdmyjB8mX0X1ug2fk1EA/lZCqsrsvY0Nxn3OObYiVP1EV\nv+3l\r\n=Nv0S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDg/OgZLvknXMfC2TDqMDd1aTETUPJW/iwx4VX1cGzX+AiBCdJMOSzB2JgzJxgxApIzxlcfA2/MmkWNqdHGzLPEJtw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.f17f5052.0_1597338884986_0.7148940801217183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.80b5d20d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","@material/mwc-tab-indicator":"0.19.0-canary.80b5d20d.0","@material/tab":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.80b5d20d.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bgEI5wr6+eLPzdoYTlCpWii2Ls53hf96VHV9OQigLam/g2Hcqsboht0mlY+DBoM/+bDWib0MOzZIlm171V7wKw==","shasum":"1469ea115b6abbca8be5e4e8827cb7ec5fabb2a6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":70656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYO+CRA9TVsSAnZWagAAVC8P/Ri0N4fP3c4gmN0ezUxH\n6heMjEwC9KMLXcZl7/DbEplJn8c/FkmM8i9sjVkW0XOEc2/vvWVKSyBOxJTj\nXlLY6HN4VoQw5fQmq85amVE+2iEP81D6a3tPd0RN4oVd5uDZpkeL0izaY/I2\nIZDDkcisU7vkoTM8H+JrM7brFDQA2ssKcS6t7t09Eioglf7Qb71HGD/OuYUH\nYQUgReOSKYirW3UL3wydQR2CViwXm7mr8p3iifqth7fsPfffJE3LQhSWdsLd\nvZ3+173kMMOUs4H7YTQrFz6a8YMgQ1Eavj0JGsR7zlRjC0xRG7vCeYvMppGe\nfOTPM3NKiqeTlQgQDHmV2nB4lAuDpxngwX2//zW4xvS90lRZn6bbg0mlNc5g\nNHZcBGRm/cVmSVSJKiGRB5o98vAysqdHLlUz9atc4NbZsouPOltoDXqsJaCQ\nAudxChOir6qTGq148MSDiy3ADauitlWDl6sw5p+6RQYb6YP6ElCs726hOtiA\nkBXMRLWbXkgmLjghN/fmn/Fr/LmfLIg97uIPYNWzA7m6yfDvMiYD5gZbjc6g\nQLuWxNPyrewFGAzE8xWDcfgmDUpcQUqA90Xo8WGK6jYRN0MRZnCD/Y2W4OqB\ndtlCC7HNvhs3cvTSwBnXbk1nzsGMo4FazAjLFjlPvnswwQZvxvEWmOkUA35W\nM4om\r\n=+OmK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyU7hixwMkYuQQoi9d289FLeU2uh8MuyDYD4jolx/ssAiEA2ZTvFkwD3+joSRAd28DXa/K+v43O6UhZ2+JuCDQGLZk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.80b5d20d.0_1597342654119_0.876793890394509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.758635ed.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","@material/mwc-tab-indicator":"0.19.0-canary.758635ed.0","@material/tab":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.758635ed.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-z48qeUrzYMOeWXd8FHeX47x/vq/Xgjp/0c0Sf9DyIdTf6thwK8cSo+3/nU0WAfsmrlqdLZaVgTEtaik1pBhLpQ==","shasum":"dc22ea1fa05b3cb96f347943d26a0e55343a6305","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":70614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscICRA9TVsSAnZWagAABHwP/jfdcHZ0pXMZ7zUIFU9R\nTbNkXUAOrebax+AFk1uQo1NhTSavFUS4WRkHFiiEuxxPQMPtaFzSoCTNmJps\nO8AkbyG8hehB8k4TGuWReZacWQ5ndHR4XdIzilrGQvBjgXzx7bF/XjaAwj5r\nX9g1H3d9OtKaO+C3YzdQOB7L+aKm0HdIO7scMG6Mt3nIKrrtjJ8PRFrkmuua\ncRtkZSDoTsJk1B6jRyFJTbpwEQujnYSWdG9vbTydneLje7u4z5swsEoaTQK3\nTdlwFzQF+76O38nVKE1FvFIsnh270adZ/XQeecL7odRk4pDTRtCQTum68YLC\njkMz7rsey8LmGEGKv6ZunQSaaOy39bEcGPUMyeOEGFueADJGnoVI9Ji1STxp\nLoV/BI1eWT6WQqNXJGCLPsS9l6AlL7U2bOizXb5d/exsdvKime0/omN3rrCM\nv+/LhvTjmIY2aOML/P7Q/Piy+LkOpu1aXpBo5xSEZ+ecZIFV6MfDF9SASDq8\n1k8FAzZWZ48ymxF+Y7VLUIT2YA0J9lcMDY/yaF77K1CYOCp5NBw0C1tYBHEb\nlg897uFnUkTYvhwEWPzstcqnBebUp+eiAq6BGMl4X4M+6I0dcuF/8B2kG62j\nsHF696kKBpeiKwNlNvWSooiDFMTqCw5aLKlcKeQ+sDiDCbGebZAnCFouVvQC\nfMrl\r\n=udTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFND2jzl94EJya2dbKSNoRB5YjMUR0A6SkxbZSpy5kNnAiEA7SYvQUQvAcPWgxkIQSfvN7n577NZBJL0B1sSVyqAmH0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.758635ed.0_1597425415838_0.571877472351223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.18d6b808.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","@material/mwc-tab-indicator":"0.19.0-canary.18d6b808.0","@material/tab":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.18d6b808.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-814x0QU0HgeJA0zBttyrwadY9GOtuyImKvEBVAY6kCaCueoXNf+JLg7lBYYEUjd1uoN4Y7VZ4S4ZLjP6FQgdkQ==","shasum":"86e3ee84addc016e61a07abfb7619d68e0319a69","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":70614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxliCRA9TVsSAnZWagAA8XEP/1c2hczoH/9zKNZidpvs\no3qsJVPpMXbIXBAMdfDPe67QOz/8qeV2km3JH7fNkI1KaaIIOqQlAQIl3m6Q\nl3MNw+9qxNecNyU0bjzX7GNRy8AxXM3fF+hK3nkBnQN1KJ+OaGkcIDitfKal\n6XfPhZ4cnutkFsDgyY2tUoT0wvyuxGMg4GHPhJLX1DK9tH2t7wsUO8YqbnQL\n5z1mAlTpxj+lP4ns70mW+L+MA2HCiQQXgxLDIkL7PWxQH7icNF0zS2dpgdr/\nLWbxikDNO5EyfIHtJivBxd/b4Ym+94g6eNc/vzPor7OEB15/LdZqESDfvzYx\nptNLsZortxbnFCZoYGaHxEwYOBHE1AkucufOycXGcxFb0OgrCR26SBe5rGfr\nkty9/FfNU8TZrhDhkgi5DyAVJgZvROk1A9PAtI3un52NZbGTtlBcPToE9doy\nV+PoBKCe2WYtaLByco0eMHVmmIbX3cURitELbzKfuSVIC29IZmlD/UVAs4+4\ndG2k1U7FimbWC0zneNTD9Sb98HHV6kD3e3/9+iGetIkqYHyaI11ArBLmWa9H\nW0g0MaSC5IZnssVlxiHSgy/KGVLf4u6PsThGN3+wRzALG3bh7W9rD4NkbeCA\nzODeH6stJSGiHQZC1I2M5mq5zrS6WE4HhwjtMpl2VsUl1e8HSV8CRX+UP22o\n2GV3\r\n=q4NG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWAcCN5TzlTot5IexCCWyQyyfF+OekUEV2YtYtudEBbAiBepqi3/YQWG7pS0gQJ32d1wUSK1GWI78iFPwHFw8QEMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.18d6b808.0_1597446497892_0.5044689344907844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","@material/mwc-tab-indicator":"0.19.0-canary.5f8ffbd1.0","@material/tab":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.5f8ffbd1.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q5pWqj7100OU/88igqGyzS3HJ9SxZMRVGa4maf5CRXAwH9MINqlY+Fv6UBaQZsJ4Kz873VQBgds//zFNwcgn7w==","shasum":"f21a1c63b711e207cea920cd3dca50082bcf9bfe","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":70614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGWCRA9TVsSAnZWagAAXq4P/jNFjHfH+B/PkVt97dzP\nWgT8BQbNVXmHPN0yojFV5Ra6OEVEEOTuh9iCrJAyjlavqX3yharYTfkzYSlf\nm91PRUNIpFW2QfBemldFtXrrSEZYSv8A1gkVoAPRX5RMdZmi8BA1ZXZGl8DH\njB0igTMkbmmkMLrBnu9voRgBLews6G/+/JFNs1cqBm7Q0GLQG8k2hCPVixiw\nNDgUctoLIp49h5+ybVUuk8vSFEBU7lHfYH3iajGOu8Ska9EmQrOAGik4RqE4\ncv6m0N2mspnGmV+LnLpa64XcKBhza5Iah5ZQ5ZmLbSjMQn+FstXgzcYAF1q7\nSNa15rihbbHcRV9jOtLXYfsYFylln6p95D4WBwJQH52KWedGIXIudTDcNWV6\n37JuRPOvAGx7ObSpq88aNjQXp61iL1C7ZZKB+3odv7CNiAA5Pf8OKjbk2w+n\n/8R2H5xsG8h1TkO0EYrgBYiTjnS2tpBkSaAnsko6xcGEEt30OLfhhnm8lB+1\nHYnk87ZCZJxkTIWJxpUcuGakVNMhnVh12yV6Nb97l4GJBb6wEdK0UeFr/avx\nkWE4xfCfI5xQfpqb3m1pBNIXu1zrmJVzfW9OKs0YDZSWqPaGSS5QhS9Ya1lS\n5G7vvXsjF5jOkSq4vabpd8LgKl0ViXJRZ0ujW/Qm02UjLJ/Pxa2XbIFhDVwi\nZV/l\r\n=RO0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOc7RBtbw7ggG+Nq/8cU2ioWWrju/oFS8lzWsKTpDotAiEAhhPfNB5Paljf3XzlU87i69A2KQLaMDA7EgsRf6H0bCg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.5f8ffbd1.0_1597702549536_0.7138974125729307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.8604d59e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","@material/mwc-tab-indicator":"0.19.0-canary.8604d59e.0","@material/tab":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.8604d59e.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uRMRaWNX4uqKS2cSXwXdJwUQL1TKkUhBnaPGLKbu5j9+A7lq4y+gsg42ylLULKdHQba1c7X20CdWRYD0wcJ4Xg==","shasum":"f791db5b1630261c3e48b8408300130d0c7f44fc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyi8CRA9TVsSAnZWagAA7lgP/3vMoH+QRDC0pKtdwpQy\nNIQg+638izGNZ5Zh2gzqXHHCwEO7mF/EbUbJuj14VGbSEMGaaYTZ47A6AIhH\nkjVCDqnditQbLBGK6/CG9XrDtFrFR8OWThqmjYu1PRute+lhDB1IuiKs1ExI\n+9kwn4HcpWt81WqaZlzH5FdqzLOI3Y8RrO8GESB1aLyI8KW9U23k3eN0mPIJ\nEf7w2hCizutN0LIHY4iSpk/iZL2kWoU10cRFNdyu282Onp/qpQdA9AZrYy5m\n/gsIEeKawHMd1VbEew4c6xseA1aF3BVZtomfnA37F3JLEZnpDxAqeHLTAR7r\nMCXKwCn+JYNrJkUBDZJHmiwySRTqf854F9NtM1UsklZEQx42/S2eWVvGQnil\nAbmf405vyGLjgtOWyT9wbVp2iE/1TT6Y71Ku3dG8zWIhPvYEyg96+TwKOHNG\nrN/XHrCIPbv6UT1U50LyjRs7Vo8mm2qc1Yjo9itRvdj4+qtX6o7QtFZhE1X8\nBFM1zpVLVUZw834e+tj+5RoZPILEg8vuRIlwzpS2t15tinGqLhVMUG99Z8K3\neZuFu3X06OyRYFGovMTl4DOIS8Ox1GA4lXOn7zH3qK5Ldj/aMN4nWb82b7ME\nDXuldkQNUasEYUzxyxFIsPm/ELcX+4yq/JSV2np3P04o0KCgO2aV67+LE/Mb\nJDhu\r\n=flUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCktsqhr9+1DKCLidcoyPuHRy6O/lb/d9Ei46Sjc2x4HwIhAI6iGlpyjLEtlaueCfdqmeaecEG7WZ2CEsa7pmTNmiRq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.8604d59e.0_1597712571551_0.9706736852808344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","@material/mwc-tab-indicator":"0.19.0-canary.1d7d5e34.0","@material/tab":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.1d7d5e34.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1GMVbNR7sPLl/CuASxz0nEqAHRJbUa7K1fVQm8Yrzs2KFNnIZHWoCbAUxymKHKng4cXDlmjXugVonxX3/zyNsQ==","shasum":"d21bf55567acf4d20c8682efea312fb8d607ce84","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyo7CRA9TVsSAnZWagAADv8P+wfq0e62kwCEMRScZobo\nSRp5RRR/BUl4bHkDYBuEyz1slGHln7u29YPSYYMxZaVcfKJJYjY2/VGkdSde\nkhpY5/WS23i/YDyN+RA/VonP+Ze1huiJ1D48YHJKMqMfOdWKGu2mbkQ5Rrni\nKBE8G+suOgMt9jVZOWmg6HIXXqGGHZlttYSv+0KHE1/84o4nLKagtuO3XLVJ\n4PEhNH3Z0rwp6I5yCokKiABSZ71oa6FEGffpQBan1K1F9FB3GcjgCiKGK8pB\n0+K3/umK+iNA9v8gKuJ9n3MnqmxlfYK2MUPxIXrMlHLWtFKcLGRYGfq2ltB3\nzSjRR7ns3Gjzb9bbl6kQQgaIYFYkrow6RvLfpX6yMZFBLEVVFdX7B7Rpa7si\nhwOsdLKJJ3xJ+wn6Dr6ufFwgo0qQP/mFPc09rO5+pBgvVxCuClSUUhJAbXaV\nIgSLYSDUZUGsEiU8Th+gtAFsNK/1il0R+uzqeY5RRTpLzu7aE3MG2WruSCTv\noB6QPbqGRJ+22YZID+8hj7K07PRCzZqFQyC+q54VYzO0I1kuiF7TuyGaFJjk\nIWS4aN7IzXFu629fJNsAddQHRcOeS5mX7PN9djqyugpX8EcjbdYKCJfFovEm\nqPJU3hLLYp+3FQyd+Y6ubTUQ8ndVtRqAwTjYOhARAYa2AnzGhUW3VKPFE5Ur\nR06G\r\n=H+H+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeXjcq8S/RtiEdRSX88EbT/SJW17yNy+cF86JCZQYUJAiAzEyExic5KI9zP1u8/3HUw0HPdGxcuBQjHK0K/+Jh4ew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.1d7d5e34.0_1597712955132_0.5463012920718902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9cc95c07.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","@material/mwc-tab-indicator":"0.19.0-canary.9cc95c07.0","@material/tab":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9cc95c07.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TB0p6+c6hxZqFhUGWNmpkx4BW8E3HkYuW1HEkxpoW8DeJ6VtBaII1DYCMFevHSD9cZLAyNSbxV81sHpUjBuTTw==","shasum":"da2a6ea91fb2e8f713fc5dbb8fae06790e9edfee","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywHCRA9TVsSAnZWagAAwdkP/jrp6ntV7Nmw/0zEj8Me\noMv3xWeyyHCtmSERwtlapfAc9rIsvQowBoHYmYHL2dhWXsRrhIxG3zfEcBkA\nRfBWJv5UZVj3gVfzKbRdF6sLB6vZ7ICApiWanDlF0AYoujBFWvXLHqTEiT1V\nMjHudip02vzFhs5+2hjwpTIBfpOxSyJgpVjkEUj3paeeERAsd4MoI2zzqYnQ\npxFqDLIGua39UqtIVMmCMRBeNNlV837/x4k6Bspwmss26J6QOvj0MSqAc1Tr\niM9FHILTtbN7JAxe7EeVC2DYg6eMaAUlrzVlv/eVayKWtMrHoB7r5rt1FU3G\nQbJkXDjVAVm4HmixUZMfHqBvaJYKEBux1mhwsfqCuq3OvrxD5lDYj1dLJBfK\n1qXDJe1kc4Lp3JeYaO8WJ6pkvz70T8Ia8LkOomDxPPHamrk4ggnLuaMdhRTY\nA6Hca5qS5jEr40Dj0/Ce10KoN+0CcLk/gdPuqojMFAUrQ3rflnd/xiytPXSh\nbHAJFn7uGECDH6WczFBoyyBBT/8+ZvTIII+2FTnRb89zNuRB5bwhMDTciJRM\n8IP7BrNydI3NkP9NJzntF/kOD01JZby4ysu1yVvBOBBepSiyr9OutBVCewK7\nQfSvMlfX7THoVpJEbA3SJih9JObFVs/MZ459cT8A35ak1lSMEEvXsb+vZ5f1\nLxka\r\n=b3VK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0BB+28Ldzz7b3OJ/KLhhcNpdXyitfe6y6Ql5ZzurlBwIhAM/IykdAe4/5x6FN7xvUCjPgXPvdfbeOCRMgPLw0SAok"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.9cc95c07.0_1597713414999_0.41602660406026915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9f65ced3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","@material/mwc-tab-indicator":"0.19.0-canary.9f65ced3.0","@material/tab":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9f65ced3.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LxAsqpqpQLoVa34NRahI3mekbS4oQPpvFWvgdND5BOlrxkasm3s0WLOmnnIQS8vAgBZE027Xbsfq/++h6bObcg==","shasum":"defae83fbd4a83afca41580357eb98513e9f6821","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcXCRA9TVsSAnZWagAAPpIQAIom5HoskuU5W/NaCCPP\nVYd80CYrzHuawu2XZ8lTAxOaPBweIyYAHQ8khPoGaCWKgm4FAD4W4FKBFyGZ\n9RregHSXeMJScgC8qBmuKklOS7mZgelTkK0JyddlhwDPRquMIQyESj0Ro09i\nZ1b4kfy8A3bMWrimIa/HJnxGBJrqVmhPB4i091Aa444UsTcVhFXghkvJXyyn\nU+Yj2jrg9c8yWO0nhiu2snyfxQixWd2N2ArogaDLGfoGXqkN4DbYGt1fLxdw\nLiK6PrbzEDG+5LTL96dyG/xIHLowxyWB//WfLuIUXMvinNM5JNo9pj+dnq2R\n+3Y3YIs8GowJOgYtu/fH7wRIpdyZVfbFiu7OLR52TxDv1lVRT2YpasLQ9Wh1\nAOqqm3GLUd3wjyMjgojzMYeweHm5BfMvzI4DOSRvACDUHzLcT+CHvnqMScpT\nAlmwnZY3awG9g8ktUItoVFqiQXBQHS0JGggR1iet5NphYaGrUBjt3nOdAet5\np1FTXAUtiFY4IfHRcBp06k60XJkOQ0lYeOONGxVfCg8KHajZb0hIc8Z8GmDG\nGDFASjge6T0XsnOyRh1IMoIoKcKo5hG9cqg3Exx3xLnGuvZP6QFQZYQntC1h\nY5bKyBAQg/Y8O4/6CK4kNio7dtpKKCbNxq4/ogDBxXFp4rBdTQq+CH8KBC2m\ncQAz\r\n=OcJ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb6eWrIZjYdv77sosRY8KX9yBDH+DZBzzgWDOFapDq9gIhAOep0QvBZKKdoyZxmul+HA4PnF6kTizxH21Czgg4uFvp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.9f65ced3.0_1597781782836_0.24091712661585474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.5962b365.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","@material/mwc-tab-indicator":"0.19.0-canary.5962b365.0","@material/tab":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.5962b365.0","@material/ripple":"=8.0.0-canary.66b8ed7e6.0","@material/rtl":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Pwgp1LXLHObx8t+/a9niJllSpXpP3Cwpwt8ziStGK/yhAWxPgVt09rfUPpeEataiQ5goydNHhAAbG4J8foNciw==","shasum":"bd0bf4894591128c9dca9b8600ae9fe375925dac","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYugCRA9TVsSAnZWagAASfoQAIBIha4bUGZ/tj7TSgC2\nmGDwPKN8nCF+w6MxwvE5VZ2LSYlPy0mgDSFRlYRfqvvwHA/2RSbGxNyqMvyo\nGzVAKCVOuW9XO5B+aGR3lhpXLIQ8O8oXrGSY1/TXjAt4mPoXE5AgmArQydJT\nFPfwLrvKgbOkFGd7HqkxmRJGZ6F9CLvh2UhVQxJle/2/wsutRxsZKW22jWZW\nAnwAeKCT/oz2F/+vwYgC3E0P0u1LTFbqSfEwMLn7Z1PGTRggfoKDxSdmnuyA\n6F41PlxBzVNSlpamWIKSPSNLhmgc0ItVMc959IsYA2+ai5k2Sh3bw/GRsPZy\nc7qasRznSY+AJRyBZ1mQ3Kyf2eGg5sZqRTKOLo1Dr04phDcGWCnyzcCa7tmC\n1d+a4M6iSbzKToEctWHWoYBsgIU1CWW1McJ9ke6pKn8O2EUpC24x1ZwngY75\nELAFnNis8CNvdokPmoIYGGL6OC5Pd7btAMEHBs7Q9VDatHa6TcVqb0fQgFGp\nTKaUv4hDy/zcotEpi9y2EGTKsVnmi29pACCGYFR7z+YgkKJNQ/2Npasq8kCi\nE7ajLbinWuf3yB5onKYfBGRUEeFTlydCE7td5VeJIAIalvBPst57ep25UW5i\n559EXqVFcrys4N4RxTgCU86exeN63K3r6on8mkkU3LlQBus4Z/2L4eZhezAs\nX2XE\r\n=D1R2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEe9bEFnh+x1dCPIv8TTygISzHiHmWKgxBf7xDHLiAUAiEAwLXkR/knfMCmY2A8u0dvdr0jjAgvUXCH0JmL12Lxr7k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.5962b365.0_1597868959982_0.48819593546535445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9c9ec756.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","@material/mwc-tab-indicator":"0.19.0-canary.9c9ec756.0","@material/tab":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9c9ec756.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ei6dUhcFC0f9RY8jRSdPgovDq386myessEBw4AP0PtRyS13O9Jdgth6w+fu4KDgi+mJ8WcoDFapREa+8PRf9LA==","shasum":"421053345cccba58e2678f8fc183c2935482fc3f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdICRA9TVsSAnZWagAAhPkQAI8q/oOOHJBuOJU/8bCZ\nuWYugTIqbwe95byRxzGz4F1cwjwNu2LZZUjRobqiEXqZarR4AKlss1PMzNDd\n5dzBv5Wa/ZC6yg92A5qdTOaB8/97P2tPa+vju9B0H6yqjLL5OY7g42pc0toT\njvIMhTarUspjJWXrIBsnoYAQ8boxhz7HLO0eiK72chwmH7yC5gseMlkE9jvq\nw4VEF7ENaMbrrUGE3eJE/4L55YDGaIrmUmOFTYYqdRKKds/pD03NwiYWf/J5\nNB/ep4sf15cEx7TJfYTvrREa6oY0ntXXY+Vhdvpy3e48LHjFoJoBifY+Cns8\nK5dUR+kOl1lr45eVjqlQ26tMn3jRfZP6jYRtIA4WMJgypyo2fpZT1Gr3HEEu\nk1lHp8mcys5ebKBOXkT03JY+hCbZ77toLyNcsj52ghJOr3kw4CVDgQ9wBLxi\nvarWpuoollIgNZAo7wqrnt9tolAAh+5wPyt+TMEKJhMQbDkthaQAlNTInfJB\n3XA0/9MAHy1tzEUrk8OXMRBdNAcvcaIL4nrdyJT7REMBJHN6erHI57lfWlI2\nFahlq2tFgo53f9y9oE7/fOKr+PdWSb74Ld3+HVukpTzx8dMvmFnbXT7D4CLv\nIV9erjS95bNWd3o1vHFLCK12lHGQg+hzoABI/uuHw18JdZ3IU+nncPBc+Ota\nK7bm\r\n=J5AE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKuLT0k6cQ/r/nENU75HYvsREMbTL/iFhO6hB3NixBFAiEA5VSknaWwbkScvMFl0+fhKKhlVWnK5INuvptLz6neJao="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.9c9ec756.0_1597949768055_0.9887044117285404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","@material/mwc-tab-indicator":"0.19.0-canary.fa0ad66a.0","@material/tab":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.fa0ad66a.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P2RXzF2V7uKBTt7zdWDqeeejzOVYAjgN6pjuYtHhub7bGq0b13Fv7Jx69v2vI96DExSF9DGWN51aNTqtURen3Q==","shasum":"7c3963cc55536efe82a63f4e847038d7ee1e1687","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6CCRA9TVsSAnZWagAAWvIP/3gyurXU17stdpYbzNpf\nvRI+prLs8tTrliM9HoyU0kdxAn749Jtfk4MlbdoLBawi93S0qx8MnAlSeDX+\ngxsQHSco4Ut4pXZy6x3+ZPQD3qbcOOY1QLw0Ih5O2CtomB5aw/c9faZ6CEY1\n7e3e+yAbI7PVbUD9CPOgjwUGgiluyvDpW8a6R9nh05GfPynY6wmjRu8EbVMZ\nhovMtpT3Fx57CQqhhNyIb1jyNXbzrgCgSDKT++16P5Oj/y633Wc92ucPolxk\npHxzjy7Gj6nxlqYYIBsPFv1kmB4r1UkDouYg0qceeFxJButj98SB1BaeC4rY\nny/iCtRbYdrBTtPmmQxo4hPxqXPR+/2YbzvjBkLpa1k/V0RgIgAxS8dlrGpv\nGgm7d3d/JbdFymsAwqMp3J4NFV72ebZh7EG4wc1rlzrKt9TmHT+xpuRIF0hi\n8pHqNZd2ngB2vTMWANZvIg2exa3PUXjJpRdByb1+rL4MJFQ7G5jWZVgbcl0A\nZt4VYP792ABUE/DIMci6eHLOMWL6I0IO58RwKFkFi3YuioPNsqzvwnJrrxty\nkGnMBlI75FrqFE8jnICbsvYjOee7kFK0UVwb1gH+eetKjgDV0SGlmsynh/bu\nomRUD59mewkR1vSyQxiT3y9I1sDg6Zy4ECW177GMc4d7NN4mXeUj1xNTsbCT\ndKpe\r\n=gBQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1An4ZBQYx9NNBcQrAqM82XnBxv/cps4B2WC9x06Pz2gIhAJ4h4k0229ZUEWxeR2veHsbZcRAspqyt+N1vErRzYpr3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.fa0ad66a.0_1597955713896_0.23228585189906692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","@material/mwc-tab-indicator":"0.19.0-canary.06ecdd6b.0","@material/tab":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.06ecdd6b.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vRD0WWuo3MFLzXXN2oJgHuycmEJpVqRhVbLlzhYQkWTpEogaDmcYG97SJfH4o7lnGxUd5momB9Ed1XpwwmiqEA==","shasum":"bef7f127c5730b9a8f28babfb274a33992a29a2a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxVCRA9TVsSAnZWagAA52IP/1fvSxcUaGz8tHUm+Of5\n0yhtN+SW/cbvR4QxFx3FY+12VFCBLt8PaeJfNXqQBUuGZDOQYXkCW95Aw1MN\nowA8Vzw0nIYsaTfkThBORV9Sgt/uLzagWd2XeC5HihD7grtm9OeF20OKfzUr\nGfe4vjGU8KqjBhqi9ldpSbMD8bX0hTWCXNygSh4Vvwtn1L+DcgewDL3U3w+j\n/NrMNSly3wHcYg/a0djcX3TA++Ds5ZMw3GrjBDD2/Pe5KOopQYaFk1ZDwRgu\nQqe8bswEziOFvFqevFsbSYBL1racRIO+bcumDpoS39ovea0CbqF0WKG8jZce\nuEH9ErHu2yAO0CJejXyVwB8tqH7a3K/ReFk23bjEf7+HYTiQwTgOWDtdljeJ\nGX8aQx+bO+UwA1v4YWSgyZob+ceWFs8CFygrmmu41LGk4f5HrPmKLgsqa5uM\nxBmBhBFet1cuulXrmnpxmC3M/PZKwmd90IUM6T8UEqNp9lYqKQ2nBYq6CXvY\nzqoSJzMQUs6aG3A9PfpZpP/KkpBVW58uhHs5UYTqq8fH9TvnM1J5p18d4ua9\nO5YbCoZVhI2UBUNL/MnRTP0SKaPQFITEnt4PzPrdX2Zhux6gCEwlp0Zed9OL\nte8A8VsigpH74YxsxaFLyh6oyUxsYu5p55r2QLSaxODtt81BCCj+o/dWSQSA\nO/Uz\r\n=8o0i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkJDt9qcl18Y8K7ala2wcn040Ckt44m/cT2zY/zPl7lwIgcqwUoGeCsi6vACNy0kHPEbTKsL+hsmZrHY6FX7G8Agk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.06ecdd6b.0_1597959253173_0.43583835773276913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.2bca2318.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","@material/mwc-tab-indicator":"0.19.0-canary.2bca2318.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.2bca2318.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-naWEaUcxwrUklA4O2aakwHi75xkvzezsYQACg9ctTEi6YTR238UW1cnjKt1/xya1EKay6t2+7dtGKD7a2zg2dA==","shasum":"c62a8a6d9afb28b46c3a49008520232ca386fce2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnqCRA9TVsSAnZWagAApIYQAIxiHyckVx04PnJOO1QZ\ntg2yfIza/WrARIisqCoucAFzHHpfdCZdFJpmLxMd8Sxj/z1n7Hc3hyDG6wSG\nLhdnyvNg6Ic30fc9eMhUyCn0Q492EjvKCz6D8Vgxek5CUlyHzF14BBWI5cxU\n3uRng6xwc+pRrLhSIPmRArDfDt/yvaLVEXjLqihgBidVnhaJE6RXY9iiTsns\nKzOXeM/s2CJKPMqgIqRMSHg3fV47PRxZgRVCcH2phrpZPRMhQtsraC+j61F7\nqffYXqHSnay5PH7T/HF2BHNVMxc/yNRxQoxiXhTDGDfUckw+UWdJKAXwCcPS\nhOqU3SoTRN3fWQ3i1SX3yHSPT1q7zUfsdBqhJtZoaBOTfwgyKEE0gADF4a2z\n3bZ4A4zXXctPsoxZMbs+8jgmv/b2tBFa+qaJTmmTHZNHXISrUitVr6r1oDJI\ngN+FQ4jj8+0E+FaihP847NMRGLeIdpW+g6QKCFJrAv9J8L2zWptGX/KG/PNP\nYgCPZjcAKBEWf/mL/ix7trATlRaj3ocXC01BfmsZSHW7wRgdGHtcbOMvltka\nuMOryeLdPOBHLoYE8O6A82//CmuNzz5zEFjgWBVDge6t05ykpNNvBXMU4c0u\nknr/xpHZAgzCYPsvbPwvAUT4OzBji82lZItB5bKmQmTDuzc9iOMyt4kxFdvK\n7yIF\r\n=4PtU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY5ZHc7601a0f+Tm6FmplQ6QzRYbhtQ7Ek9FElXOYmzwIgH+xMyfMshRnIqqBaQOTW3Q4rzAGF9uGerLedrBdXhnc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.2bca2318.0_1598032362289_0.31590001966280234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.6aa47265.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","@material/mwc-tab-indicator":"0.19.0-canary.6aa47265.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.6aa47265.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5uVwaMJzOLU0zGQ2EwEk5VvvyEBcXbLiZW5RYv/L3ws0868njWWmdzxaSlebeZhzDwCr0PKs+K9LEeARzll4aQ==","shasum":"6c0564de5be7c52eeee8b05c250ec6f073c3fcc5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA93CRA9TVsSAnZWagAAJqwP+QG5cDTwGTbhaoPgSC3t\n0p3lnNZPAM+jNKX0+0WXy+wEJ5GdYMSmW6ybzrmyXLSmUQsfLFJLaxVduRzJ\ns3FM84lj2/vvFG2RkVUBMzvCtRgU57bfe5Y13mID0zZMzy0O+4x7piwhdRFw\nymI0+MkikSmvqJmczbqJEnqk/nYUtDhkokDuSlRqNw9d7Jlcn8MSKFtijRvl\nd3i065Yu5Ir3+4bVtRYJVQwioa5O8Fpmo/MlBTtTCAj3YAd1tV2/PTeJXq1n\nEJsHtznfL3gWSNv7YAUvc2RtKDvhbwthjEuPeHB4EFHDMR3SgvjzFU+yzjl/\nvSV1jkLhi/+e8eDwNzBBIYIdp5qP+Cg6kl6sxyH+5hsMnSqQZzVeJ/JiBR34\nyfpK0RwJAgyaP9RzxTjRzx4//oZQWkZtfbNdjB9/oTQeHKWezqBZPh2a5ImQ\nayaRtZADPswonZ0GVb/G1ToiaAmJexOulU3YgEWDUPZ5BTqTrld8aPojlhes\nWoAn0OwaPvF4iGto5wLdQ+WEQYvhyUg11HQ4P2p/HawBLkpned7hCnMIvHwO\n0YmBv5FoNNCyHsL2FX1vyOzhW98xYhJRqRHBZBDlUgZmdwwgttPQPSqi5Gcq\nXRdHIY0Ilf2PDmamsgrrskCmH6Sy+AXEyGiBRqznc8iXm0hBtzLz3QrYTBLZ\nIZBj\r\n=69ar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2/UcToZLi1xCf5+aT2eL66PkKpzNIC6A/jmwsSSYF6AIhAJc4TCaDn5Fhu8o+QfcYhBEt5AMa3Z/z2629uuFuOlSI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.6aa47265.0_1598033782767_0.2610106775921779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.e7202a07.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","@material/mwc-tab-indicator":"0.19.0-canary.e7202a07.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.e7202a07.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab/images/color_6200ee.png) `#6200ee` | Color of the activated tab's text, indicator, and ripple.\n`--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab/images/color_018786.png) `#018786` | Color of the indicator icon if defined.\n`--mdc-icon-font` | `\"Material Icons\"` | Icon font to use for `icon` and `indicatorIcon`.\n`--mdc-icon-size` | `24px` | Size of the text icon.\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+h/M5oZuRMQY1hKE0W8CnoVTCBx950CYBCLMAeti7JmjqFQlA/VA+JLIVDhL2+pEQNwBjdH24ScuvYHDih6MQA==","shasum":"8dd819d6e019cc0e4c82b830520046cd035e9ed1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":70598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9ICRA9TVsSAnZWagAAzDkP/io+cutK+JRVzKu7TN3w\nnVL/uzxa88w98tDEQSD/4VcHdNX0q44pxDyqBdZ5T3OrUoOFyV0irTOEiy0B\n2UBByT9CsF+sNewdyStqAigD4Wzo6IVWH6CuEwBQGXtwYMvQ4dZFo9etO49q\nBALF3XscIkBez3XKcadDm2BZQXZcShOiwRpFkwn8yULGH2HL2p6wVI3scz+P\nZk5R2+0jQZ4diyFn5SB5J3LY3LRwNp7L4/I0KZ2VveDW4Dk4PuKff+p+jIoo\nlETxtTuLwX5MCo9oKPIwt7xtD4m1fYAY6TQtX9GpvQFIINQi7/JBpZJiECVZ\n5/FiEySLk0tVvogHqCcr9eHsB7EHNExYsHmtjK4zwupf0OXvcK2isF94VEVc\nOjdOo/7ejI+IZkGWaNK2tUbvv7sUeY144O+4KsvHzvsNHs2jjgAmjT3LVBnH\nmlz804fAzbmBL1edTHdMq0Ro7MWMssUzg8gCwvXNdfVq6zY/tdZx8kNOpWKI\ncKPrnvPSG2c91SDMGCHlh6Zc4ezfDCI2a8J2qqRUoQ9xFEVgAQyv9p85CMXJ\ncnBdB4SJgVJDAvZX/uqKRKsjlwrsS/TlruqgWOZG3UR9h0RrvupFO8CXAmXB\nHoVpwGJLkkxYu2TS867XECY/Mkp2N4m1HOSVn/pjvyuILKfUVXhSJcfSJQzO\nbFhA\r\n=HObw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwALARjfCkPPgV3Ga5Eo9mUQgehq0MWJPLi/pe1HAYSAiBRhSO/STPqbpUVkyHLohtFH26msR9LufagW2dt4x/d0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.e7202a07.0_1598037832057_0.9942942645525925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.f208201e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","@material/mwc-tab-indicator":"0.19.0-canary.f208201e.0","@material/tab":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.f208201e.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yPR8KTgqJ83r5++2FopH7xxGTYGzMYSNgaszdSP73wN3FUFVWKOQh5i23XBGrTanyXB7ChK3Kh0qXqpr+j0ORg==","shasum":"6151388f573c37e83acba2269973a851a1bb9edc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":70409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8BCRA9TVsSAnZWagAAzhQP/iAT+Ot+2JTwf4kjuB2r\nhAhtmzDVJa/iwVLozdjyH8V+YmosQYvg8AdC2XPvrkOVQSYEFuOYG+cb/baL\nU6zDmcPVEbhjntWqFEezexgz+dwlDbZqGEqz0RjrN6wsXLW4Zh8owPnfUzGz\nTaNdFGImJWrOIzo6xLIqjLYHViNNj9mF21sEGh/JGDySi4X62iEIkocKZs4M\nZYfDBuN4bEvPyoPHUsaLPF27nPhFxzSxWYzPAIpTzbrRErtXyhpL2EXk/R09\nfyp5a1cvoQF17SZvEgaCsN/BQ8vJGEBvyrAl9RikyRCxfP6kLXeBGYqXhpuz\nbl2PUnHNj/zabkjJRV8+8wcXUhlw/1M3L6U/0mjG9N/SmiCniwWKnPbiU/pn\ncyiP5vL5JKEMDwxqmI1/5Z9aeIWQ994YaqYPBImSVFmDMczL7fttTK479zMM\nWSBIaRkhvJYcMWpq82mN9MdGbZnqONl7Pf9+F6zObR/Ifml3cGPJvwI3j6V9\nDCKPuQClkqqHnlXcSJ8GZZtPmrMq1b//PHgQi09vI3UpYYHiMAfdoaa/DT/J\nQIujMy6Ql+RFrHekWU/tZ7mXvxhLSeweI3x6MqJ+6AJNlbcDBUeCYaoc8h2Z\nMAiMNMyR03Gxbuy7yygh2+OnDbsKszO3H5ig959CfKbsIZ1D0EJdoaY+5C9v\nt0PP\r\n=ww1v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtbZL2bhiQBv6tc8319UFdd2iMQnKS7HdNlNgobiHLcAiEAhUCpE9vU3Rw/1kfKZ3xy3Jj4hMtA5aPhsJMvWMyD3wI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.f208201e.0_1598295808713_0.09779587871188467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.14a172db.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","@material/mwc-tab-indicator":"0.19.0-canary.14a172db.0","@material/tab":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.14a172db.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nrGyEivn5Jks8UHRXLAu4C+Qy4HKZxzB+BHHY5gpDFDsKNPA8exEesi7jG5h89k+FBRC0mUwkfjtIfDT0v6Cxw==","shasum":"e3fa3d21959f0b12be3db90676bb90cd0c5b7e7b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":70409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWr5CRA9TVsSAnZWagAAc/IQAI9dqQVbETmVEwNoUKyo\nFN8CjllR+Ev2M5/RwhA3HFNfIl4/DZGXJtGxYwF11k/o3707oBOAWcNZnRKp\nxzyp0uc8/PJa3rKh0NCvrE4pBA6KY8j0NV8NU2VgL3SNdMLjFsz/ls6ONDIR\nlZAAXvXqn5FIsIEnrL2YcYMotTpA/9LTJOVdqcrwPlE5lgpz5AQ0r3uZcN6A\nsjwA+5K9jpbftdT6CPbL3u/2daEMsBoxHh8j3lDgociyKDlvXhC21kxz4O0g\n2MbmfPlsnjHkX5zDzqvio2F3HHV4eUOX6kxRK5LORiIJgR8z0K76Iqa3K2oY\njXsS2UOJ+J6IVjixs1iktdmSH+RIQ5J18FV1A/2YIWct7qFkPUkqcjeA55/u\ngJsV0xrz15oSDZMUsBimEUgOxPi2wE38w5JCGGVeiy4RXphNviqHV5fS2FcC\nlH5hxZU/qplPQHPthI+UFjXjs8Y+8+YN8uLKggPctQX/5qmk8HbnuChUtb9e\nWWOCVt7FTtMMqjpSR6iJUkPdYsm8hbnoBLfPP/J7YDjzpMbHWp8myjYiOgii\nxM4AKXx5ZOginF0js0QJOXYCFFPSTFPcnYrbxzl4oEQlAjMpBsSzGo3L3AQx\ne5iWkMykOUpTFvY47r8o/xEoU+77eElriJVXsGpUf8RDtjQ79r3sXqI+JVCZ\nP0Fa\r\n=cABC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICM89VN5tJwkCoZyUaEruKn3FXsbmYApTijvQfnn6YVPAiB1RyRNO8Xnvt4GkTKmeyitSJODdkFVIp63VanqctrPMw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.14a172db.0_1598384888970_0.14179555846006364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.e6c1038d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","@material/mwc-tab-indicator":"0.19.0-canary.e6c1038d.0","@material/tab":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.e6c1038d.0","@material/ripple":"=8.0.0-canary.a1c65593d.0","@material/rtl":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XyiT0t3gHJJEi3DqqKfmKL8JOeWI1wBlLGi4czLIAIofMaP9aHbhfARi5MOBzE0ZZdJE5zXcpN+EF/yUk3H/wg==","shasum":"1c98ccd2dbf645aa1d1a2793ec084b7059d909d5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":70409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtyCRA9TVsSAnZWagAASO0P/RSdZzwxwGUa7BLm1zkI\nWJDfDaLCs8lEWlusc+0057F5mMyiUtWnafAA2OuKSvC6/d6LE7jMpHWzJzwl\nSmlAQqXF1nix2ABP2KI8WPEnXZYw7yL7JsSy7x5rvP/bymoQ3mL9fz3o+8KH\nmKOqPzY6QKAbgHDDOvxok6jzjjmMQNugHb/uUkQkPpkVHt6Jw1iBRsBw7fbT\nZL4JrXQaJZEiUKJt7uuD4tdCiEVeeUxDX5eH4zm+KdjgJvtuV2e6l/Rn9bXO\nfpshVADJ+KS3xeMAMIMrhvNp1cC9e/vSpT1X4oBGf4m9ktqabNhT9OF+Qr+c\nmSTDFvnlmJj2Yk4P6gTVdspoZXyK6G4LpQdv9R6WGRZOhZmPFsayggnPFd68\nsumqoz9AeEozq3r6v0SKhR6DEs4KFdwLGPCNY3fRtWYOE/gZ9r/leXf40+jq\noHU3wrelDxPc7o5i4FqlZ9G9M5C6gV1kh7Sd8xbPPw45e2j4hVqTmSidT4kw\nsNOGcVTkLAQB28JdI1h2O7J4JclpVu/KNLG0sZwDo2xS0DU+rUpUQ4Se8lsX\nBlgyswlbBAZsHG+J8Ai9FtTwQU4BRVRZElPn8yEg2GJyVG6Ls3mw5yyv2uTV\nDEn5TAzdNpZIMi3/rn4vvhqakiq5dkzoGtZ1m3XcLRE85bCNmEsMl1IRBI4z\noe3T\r\n=wI5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvoGU2khg0RHr+DNIJowXVjLwCRUyz5weqdMoCW1yfdwIgATURk+KQ3gB6RSj9P1/yx4Oh+ie+NNhR2USN33B+8Ag="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.e6c1038d.0_1598557042465_0.31836511025248293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.34012082.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","@material/mwc-tab-indicator":"0.19.0-canary.34012082.0","@material/tab":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.34012082.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-H06ORg63ygJYi1PkKzVJrrcwVeZQiZjw1WH0MrwFNtRvc8XW+zJN9hEhEsL3adaxPpvDJowR9pSEcabpwZZDng==","shasum":"a6ae88f9874ce7607020d91c9cd2572c77ba12a8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":70409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4WCRA9TVsSAnZWagAAJg4P/13dGDfZK6F4B7cRCoOi\nhlCjaZwOaqtapcuBzYyPnzbnbGANvIeUDD/t3f8it4hkb0TmRP0Dbxg6ntq0\n8CKBi86MotggaAOFHWvlhC1uLJ+o8terRioen8PGtoLE2wgtBdbmjerabSli\ngo++zNOhWO+wKGKd9KTR9vG/RnpqxNPg0Pvo/dJgX0EQ3Mg5EzZt/nqaHAHr\nwf2P3wui4qBl0a6wKq8cO1SeorGMbhRPHFkbp20kIzPw9fLYJRO+8UF5RF4V\n5bkgZh+/Oxk05m8nhvATlgZS732oVY26v0PI1fd+UF+3QiX63j94qnd3RV7T\ngpH4u6AqcZNCMWuJiuUPleUpIsT9KzO1AC9Pj7wVAmbNyrR9UUDY4ormvlhc\nGI68fSBoNVVAIwiR7wT2z7fnLv3LKeKDr2BePIznDpJuKgYZINQUXB6jD5/p\nkOO0FUJho0OhH8o0jb4biVrjh9hwebsMvlIZJWleYNrDNCCHJkjAigcNKR5O\nkADISMO3vf73z/VEZoHKUaej2CCR9SZ1tKYfW6jL7V2+iaYFrEmsChofM98D\nt/eyDUjngOlzIR2k7V5LXaERkekiYt6Yv4az4LYap+4HmBEKHV+5yuz1arvu\nIZ2hzwBRyRarQIBdLBaxGB6E5Q1s8set5qAVCNf36C25p8SN+/lIckGn1uNN\nh717\r\n=bdrw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHH6kT8/eNDqVrapjfvOqXzpTfIKP35/UvaPKIaMpeqfAiEAwzU6IoHJY7XxpX0RXLrZdLop+BPaHXM9VG5Kcqnb/cA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.34012082.0_1598557718029_0.26532352793089364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.c073f7b8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","@material/mwc-tab-indicator":"0.19.0-canary.c073f7b8.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.c073f7b8.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fGUj19Ii0csxeJTO72ll4eKq2pTeB16fIX43uQ5GUyRr62GDOI/RfJTeFM3eVmwA0wSK4JFmCs75Ab84jqDKtA==","shasum":"cb1d15985d3858e66317e9b54d240c1436f1a5af","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":70409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTr6CRA9TVsSAnZWagAAaD4QAIU0njNFgDvPR2r1QzHT\n24IbuOwsnf7uavDVw5FKXVCfLJz0NYmMGE57SZ2g8vl+O+BdPQYLYuhJrkPk\n7gRMpjhqedSpNdbjduxNbJ4dMyEHtOzJP2zjE7oQLIlTkXgTjm2jN5t2usy2\nXfE3LO2ZpOnfKLQwq7x3c2QOJFhkI5Ey18DgGdMMKdU/sgeKe9QfObt8dnel\nCXvEH8hnOOzQlSNh58j0mP11KMy81pV5n/HBokbY/Ir/rSuw7gnWn02soIUQ\nL3wFYigUg17+1C1yzKnLWkdA/ydT/+AjvLHtwWsbwzNNGmT/5OHkf0Un5Nxx\ncTsesdmyQAd94T7YPNHSFjqNYQtsM6zpDFKMZQjaXwqnikhGRh2TJ/OI23xr\nuNP/t7BeF1gRqnKblLQ3EJRs2GQSwiD2NvSJpxRNd34HSM7JWhFW/oxZaHJ5\nGsD0F3wrH/xspCoh9k/K7Bap3xFgvjXn74pewPDMn2DUAUYtGaoTSStNqziR\nloO4Kp2q+iy6OJ3m2UwFDjS5rocX1e62n+nxiSMEQQzWWPycrimhvP6NO2Lr\njxYNNmW6sz0kwpwpmWKplbzEqL59QvzASumuzqq4WEhK2lkBAL855dCRZO4H\nXlc4YrxgSmkE94SQzmRFg8Z9M8RyqimPTFOy0tT0nE12tsLeZnwEhzhtcscl\n6mGU\r\n=PHuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCfYlvBsz4peKOOnygBnUmrqIQKozLyZCiugwZSffPLAiEAwVnfY/qPmAdwxIg+mjWe1QTCAom/NI48ic0Ssa1eu4M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.c073f7b8.0_1598634746294_0.762715339103053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","@material/mwc-tab-indicator":"0.19.0-canary.b7ae68ff.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.b7ae68ff.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-L6wRse809z7tpZH+vZdphL5Lb2rf2wWrcsivh44pIJGnGu+zH6PD4WpOGRhYmbtdYxLXKSMucpeSB28Nv7LQOQ==","shasum":"1e7cdc33b75b5f4b50693f4c1cfeae30e5e13f12","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":56471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa76CRA9TVsSAnZWagAAoYwQAIsdd8bpO+sWRTquF9uQ\nEIdM4CpBnKl4irzaEmnOdPv8nRJuV05GP3UKk8G5KztJOuV7IrshfcI+ghCE\niNP7BS1k5NsVcHNJFmVzYWCGZjqQzTDePLcyRLjysH5YP6T3z7OHCDgkptwk\nAW5pzpHsEkea8dXdfrJP0AD33u5B58nSnAD11mPDhswAhuBu62WHMz+n6rQx\nkhq19PUwCRSR8XrV509jkLJf6e1m3mV6Lb4O+hVMuhTC8kN09bpMzxt/CrS/\ngZqjDyJ+cTIXhBwVAc3MryLeCRV6kkPujVaRMMNIN6K92rKeRUEO6MXdbsth\n1qlHVAxVma96wxZU/joKg3qIjhia13WcRuzzti5j20LsEKF7E07NhGA8vLtW\nFEf5C3vdnKUXARhxB/uhjkPuhy3o5saMeX+40tXh5eNrd5oRKQxC3c2ODaoL\nzgxlHR4Gc4ImZ2q/nEzTa2+ZhsfDM8IaFddWGt4C4cLOuOcBuY2C4iui82yO\nGgkkoOvv2X+udZTqPlo9+kMq4DPOFWX6rrBmSHkWplHPR+lT9CAaHx4BZlc0\nZlTRbAXuVbOygEO1/La0L66w79SeXM67aR9ySgWL3Ac+2hje5YzQClXRcr58\nx0UWdtPRAZcRqWeT/3NLECxKma4IguAAz8lLe+A9F2+utLvo5EjMfGZ2QrYR\nrlUg\r\n=XIyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnGgKIIPo9v9ernZbA1eRddqPtq/qWk9Ps380ReSYXtAiAnNERKC9WuWrzliIWfNgE5nd/teuaJZamEf1SRbGFx7A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.b7ae68ff.0_1598664442082_0.347462975389482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.697e3879.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","@material/mwc-tab-indicator":"0.19.0-canary.697e3879.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.697e3879.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tXHY0JezALZeKwocul65vZEJNmB2TvfW1JTG3+AT2y0wGTo72bmQfSYTTdNLAAoOWd4LMBxuqY20K95lNtLOUg==","shasum":"c231752e64a71b5407332986c9fb99696470ce94","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":56471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOqCRA9TVsSAnZWagAAcjgP/1EJhkoQ0QIZWxm41xa0\nIotBqgK7UYapX2GTaXcbgQAbzMS4O1fVhWhY3BztFfVttvdItg2+4Ck6IMZj\nFPji7h3vGRlhr33JTqyzuk7afCMltPIuChU9WLYyGT1mnkVm9mWHO/jYEPEb\nmRqQ+oh/bMP6yiNrvwfcrIBWH6LaqfK5zct1StPJ0YsEG2U+Txup4m9MKZJf\ncQuvlsAsZbluYWBEI9HDobkcEz12b/sSMRkKM5Ua7Sd6WKrpTRv0yyfC9RY6\nEzW1luCihbic6U6oKFIVy0ZUBfyDMpIq0bb1jYjeFAWToRxdUDJEPGzuZIYP\nquM3cTHDGge3gm0AKPJbzrZxeHONqBgdOpECvFYewXzoX7KyTVcwVD7DFfDd\nxEge/Lj/bT5U4M6z08PhlyQhkMAZ/ctwnveVncRaOsW+3jQMxn/CUyUycDUi\nhjlswetxR91igrW0GXt6ZG/9DiG6QC0TLECFJnCx7mh979LFH3RuYStOpYbE\n0ZdFF5Owp77RCY5cuFNkbKn6euflaRXIHjDpPV4TYobaMmzDFa5zIeQ0Z0u7\nyaFEGopTFL723Ze2ljUSyBSHyOgFK5a2WDGOBOHwLFr+wPsfLvUjIIcHam4H\ntTyVVlLbNJR7NgJNOP3ZWunmC9OCp7BCEL//ytyFA8CkjYcdbJkWGZTxzfob\nkR0l\r\n=Zl7J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC04lmKWcmAX437Hpw4qK5aMQs6VuJNwikezqQDw4wkjAIgMTITc0aZMcwNIjLuyu7DsBEbdzxexf5UOaMJgbVzVis="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.697e3879.0_1599005610521_0.6239573391968822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.eafb7991.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","@material/mwc-tab-indicator":"0.19.0-canary.eafb7991.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.eafb7991.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n\n\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2Ceaf/WHcDP/bnX+GDoD7JTJS7bZpExEyZGrXAAaKPZ2NH88zbuCTrHl6eW+2+5pgAG+GoAIvJerh4D66pGbdw==","shasum":"2c0a9f7b6089a57fc1b07815af57d4250fbbfb71","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":56471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwD9CRA9TVsSAnZWagAAo8IP+wULFypbZ/+AmuvsBUji\nsMMMzFuUG5zZEKWxjk4QfyYfslArKg5iWu7Rpk7lxsc9H4rkZLTnNqMSP8AI\nYHi6JYP+tsYXapffTB1QiNjZhyPlzXXkoU1zz39zBa4uAsKLRKqI1Dcf3HAo\nSddeX7lT2Qwx1jRhGueW+DLJNXlZ8+Nug2vFLRjTu0J/LYmhYzL7+XARabqX\njoICrDMsoBG6FI3tAB6Su1VeASDwWTAxp9MsNKVJnC6mhS6QvQkfusptKKbE\nIwpjVo7LkrYvpAz62wBTEVmk3lUesqenqNzv4VvioaRS8JYQ+ZSn5g+0Y3k9\nsR1xfnQ60DJeg3PASCEcDgJlgR6fWpOR3jDj/XmW8/Ta38q63OE/+I5DZXHC\nxx2PvFEQChdEYaRY+LU5MGT4EcLzyJNyWpmpOLTSEAASuGsX5Qyf2E+lcpvK\ncnuvbErxsYplFZS/x0VMf9j51VgjUIUAiVPbDeUc8swwI1ctgL+KcTElzuX4\ngYkuCCPRzZGccfenAElsaSQWcReWP/L7A6YGvdEByIVctQK01mtqIdV+wMBf\nUOmyFpcNuHQISNtgn3D5Pf1Mf8MoDJpCE7yuiNMz6PE8zZcp8cMESIvCR3uz\nAsTNgLhbzQ1wnMaNfjFXWZPLtVO5EmWNnwQc94UBGNtAdPq3YFDpG3aXhMRk\nWfd4\r\n=C0VN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHpaoOU3zxc57uAskGk8jT8TVVyr4Fqvn/85zN/lwQogIgYF5IXMCeGcd0QoGX1PcohXrX7VZHbQTINSdld+q9hZ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.eafb7991.0_1599013117163_0.049045624704417534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.606642ec.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","@material/mwc-tab-indicator":"0.19.0-canary.606642ec.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.606642ec.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8QhitFr7ztbr8gl1DfAhxx1Cvqt3NX0Eg/vEJOFssbu8xKP7xHq1IMzfXN0yij/cYrtVR0FYbOVX0/uMMpC6PA==","shasum":"35bb5beed62daf6066b8f2cbc5cf986c4decbded","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBA5CRA9TVsSAnZWagAAz2kQAILfTQaea/QSwjiidmjj\nhT08FoV3MJY7ThHZ057CVW6kEP+HhRcLPNhpl4GB3jnY7HnUGl6uWUO6eTTS\nVHjA0uMTyz4dt4Wf8z8jbkpcVKdPslcMKLWN8vlemHjNiTfrXSozZaVqPr5Q\n2zVz+cEsuFjfmTqcWpWa6tmQ8LikOx8UaY+K0/mow0zgh12vFqck0xbgiTbo\nh5pwery04WXXncqH0qhdDxAwF/jE9z/SAalemYWvUzWSSmfyUNRKMwhTanbE\nI/0YGPcBAzPv8R726T9kPj+scP54qAAycJLPsdpSZdU6vDyyKR0KjoajrDl5\n7OfHInZNrMw5mTYpNLx7vI0tvUab9YtkjrDeW9mHG8+U8ZaNae+B5WzO4pQQ\nMucf4mmNU7p2Rc5hsgoxliG/pubd7bXZxqDNoPFKAPV42I2viSc0lR8ekZWl\nddEmidjq21g9IbcXs9Y+Z+1P9WZ5dP5TdMXBfw0YFT5GAESd/kAZ0E2LpcTK\nQU7/zLt6AyG2Gq068STEDLVTFRDmpo9oFIjSprbNfRKRB5ZHxN8f92j0LD2T\nFeD1SzUYHvHzRqq8M5UF9pkDl24vWwxL1StXB4R4InD59BOASSuM/u6ACglD\nQa9lhlLedB8GV8nQYCNl4qfgB+Oro3emMWII9L0TDGX3cucNRFTa+f6xSEBC\nfbPv\r\n=07R+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH13jA4ddlyjw2aAbYZ8jTJvBVw5Esuz7IUZUeLbQcrxAiEAqV0ubUTVWO2SgKsSlDkl4gmuqt+z9jwwrD+v+YuXKhI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.606642ec.0_1599082552555_0.5827835532665058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.ddf05c42.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","@material/mwc-tab-indicator":"0.19.0-canary.ddf05c42.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.ddf05c42.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3tAtvFsoO875Sd1iQvLszBF5k2gIUI0mrm820obwKx19yDOvZROeDQ83C7rY49GvskysM6eTCgd6DeGIoTz6Yg==","shasum":"30aa41b8c1774f9e65d36c015e816860582aab33","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVUCRA9TVsSAnZWagAAiOkQAKHGDPnQNKv2DPvGLyLA\nWv1FK8+YyKvQ7XPKd8BecYitpAgcD8IHbx9wxobSIZNbEbQTA1E5Tv9yLwLi\nq6ntN0Pm2L3p9HtwvAxM1fNHBIdJnm6PM+JYFLY9GhwwHZZdEulnRxNCZoQR\nbhi51GmEKx6dNHCzauI/K0J2Q6+TBL1K02XhiEXNR48OiRurJwbBCB1beyxO\nngTbmTfHL+L7Kl5HhtRPz37p71PmhlkVf3EUWXogdKgYHtLnOKGiI+oS396U\n3e9gt1lHyP+oMGMbRphV48U/khqJqE7E1WZsovHB7InmWBCFs7A9zBO8zChM\nf20jLY5e1Uo0++3pQE7xi4EavInMEkCSQcqqyMpuRnIADqGR+aMJKU/HEgn2\nKVk8Sm6bp3IgRrYdQP3payeWS4TJR68fOF8Ok8cqbAW5Ddqi0FCOnBBtgPfc\ni3VomcdaTiup7v8mwZIu0YMcmb5Q9E5revXov11v6twWvclYoLs8gf4poX+s\nfXF/O4yLmwcLqZVrmtXI+RJMSZq2cr+643ezb3O+bewv6Ex89U0nrIOP5Hwe\n2D1jw0WpfwI+8DtijNi3lg3cf7IDgLx1dRvt/BUiKHRPg2ckl7ApVjhTrV0f\n8oC1khlg/zfYVcHThiqTNwI+NJWupPyHUgjLNL5by8H34rDa42U0gCOjZDW2\ntvfg\r\n=2sgN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGtG6HyDPy4I11v+7cSVfeRKhA8/gwSrNWx+2rVGHuXQIgFTKnG2gvEDLqLjidiECrbL58Cd+OkEJWYXoh2tejCRU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.ddf05c42.0_1599141203727_0.090126298118955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.b889e6dc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","@material/mwc-tab-indicator":"0.19.0-canary.b889e6dc.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.b889e6dc.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uOgNMgRCpm/wDud5TLcTYIRW5C2SoDu16lBJCk/p+CrSsNEDnYlvBCHbk6uco3QoR455dNDm9pa4zipmxSQDPA==","shasum":"c124008a4a2338866dadb573b7bbe52050738064","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmUCRA9TVsSAnZWagAA9JMP/3g81qV+IxXtu7XsMz4C\nTHxzyUS4ia5e08/7HX7e3TXQEg6gPuhKFpQfGV2x0zE9zFpZtMpzEOLeFoqj\nZqq1U4Gfi9vGnslzGsjhHg35q5B4xDc1Asap3SzjcVHl4NgabunTg9XxxOq5\nT7RHRNWtUQpsKJQ5VfWQPgb9KOcMDBFH+mIqmSKwxjI/utV+alvATRHnTi/1\ndT4oOt3MZQodK/yxMg6LXNjtFIcDs49tKQZOXRcAiMlGNlOV3hIzS0nBD0Kx\nYPuila4LvhNJTVDEhJcbLSERzGsD+6zwgfb5SMa7/rqTT5cazvwFmxd18893\nWWq3Dlj8vasAY7yafXGMX07cYLu1ckPXJJ44uWvh8cox2w1il9nUd2VXFpNg\n4NliFKxvIUif4wdrJZ/iP9n/YzkGpfogvkqeV/u4/m65OwmCB4Ro5I9h9MaB\nRflBsyMI7OYb8cd6mQ+Z2VO23Mmsxt7HvgOs9IsULMl8ydOAGl1OvrkTCedj\ne5WRwsIWWnh3fPGK1+AtFb+0RIEid0oIFjfr+YOsliVRtwWNFFKDIdCBk6WC\n0S1mKiZ7kfmsY5NYMYbj2Udo2eC87e2U6wnbNCTTn9eI+ST7UOBDgKg27r3o\nSOmoZ3jMJvTys/Sx3RXY0Sj716jD7fQhA0dIvjS2rNe47CqPTZDlmGI0p6G4\nUurd\r\n=iqYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENM+ChpAxEXvDMCwK79aptTX4xoGWEOWXU2DhLZtvSAAiEA2/4PsJ5Jp+e7sYzC3FITuhMbBGhfxPIvC6o4wssvrBU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.b889e6dc.0_1599142292492_0.6783963997352347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.aabeceb0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","@material/mwc-tab-indicator":"0.19.0-canary.aabeceb0.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.aabeceb0.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dpT1x5IqmfiUxleXQ6KySHiywQkqjexgw6zl/rLyuayGdVcC/tStm0ODgigKSWgh4pTCoMf21YJq56bKsQTFZw==","shasum":"021e65f14175e257ded5054f2676a5353daf699f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrACRA9TVsSAnZWagAAj8sP/RcdZbq8u4+jPxv6bnkj\nF6njprkgYq4TU/jOfu8H+L5Dgxg9z+nIConf5XW/0iuj7aEBIqzOOtGFihdx\nZR7CJtnOabxatGZhhlXAwKnwtng1ECdo7B/WZwNXne/KdZnjwTApuDkPvseU\nUob50cRwjlBu+/GauAxLqO8bGA+Zm+9+8CP9k7s3KnbuAhKnMMV9clw78ky/\n7o9gKVtvVk00F9gl8VbAzzyET5Fu/9YzxpKbkQX2svWHH9//ymn68mDH1JpT\nnc6Eks9Eq5Civ9fg431Thrfq6BwIWSCOUqZcrYAtJN+7shVzfXwacZenKsrv\n9EVWJ8D7uQupPPT3wLaPIHUkOmRseEJEpOPSBnCv+6viUDTdZWMPIsZTzkQF\nsO2rQnFsHMJrOoEUdPP+i/SK8K06k1dp27v8pumIVioMOg/hsJ5X3TGZixol\nRl3QSYURZflpU14go/lFmIdg53A1Y+g1s+Dlm7K0P4+jCrwOkrcLYOMNUInC\n0wjP3EWh+Oi6uaRzSrHNjqz4nvC6KNZ3ijSkwk16blLp6DODuO9GR5g1htB7\n3Ln+A55nkEfNoWtTfBPNsuBbwFil382DxxnMHeiBtwL+HMgOAb+Eqrkf3A0o\ncAkyATVgvmBFYO6M1XovEevWvkivUCRN+gHuhzB0vu/VqsSNPqw45Px7L4cg\nB4Vx\r\n=nBQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfopD2KgTNattP1DKkR0IXpMOUBJgJKV3TPQ+QGjaSGAiEA+4y/Q599ByA86q3otsfhlKBWp4+Q5GijnpCaUTxxqtI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.aabeceb0.0_1599163071979_0.9696632756736372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","@material/mwc-tab-indicator":"0.19.0-canary.d8cca3a6.0","@material/tab":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.d8cca3a6.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1GfGTz7hozrzGESUWCpO4FaVCNE2ODJQDRprf19WBP6lc1tZcGlFEHQlL8wtSmv3NMxjtDC3axAJjlNaYANRBw==","shasum":"390e7d5e7e1ccac0074ff414ee95e942359c769c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDHCRA9TVsSAnZWagAAC40P/iddXEWwZ/Tzz4fzZ/Vo\nfXpnGx7KY58rzUrsP2dKZJuti5vKyAm7T+4BBGhIQ998LfcuWtgtneealEOJ\nS1eyoOelI6Xzviq+ZWBiTRpNyR9XuR7KeYI2s3W1hyjonaG/xnT1SbaX0tam\nDbVeRxyJE0bQtotr4lcfp5cL1ZyZwW6Zv9uAUeSePvPvzQtVdwzlOWdyrw//\npBQruyQ4xuIIBaIG4vLRgkFKEPv/G5pspYSzryD7+8H65nrM3cXP/U5mXp+W\n4xJ7EDzWYBrjLLRRAIynwQFpY+gtQ5TcXzmxjR0ddzFEbnJSm2wVndO/Hs9k\nU6tPqOpmViX7kGqqDwDMtkq8wD3L/ymcVw0yeMYVuY4u4QQZ2eL4ETCaiuNH\npURvlZ4vi/Ndo2lm+Jo5HZK8NBkNSYqJhLfgFb/QQCUIuTcv0oYHxlhXR4ge\nNLK7RpCEc7XoHNmz0gKsmhsIItNNK0+CWUSIyK2mTieiseJGB5AwgUye/ANk\naJAXab7MaTyKlkpCR7D5TlRpN4D9Uy+wzZGzV2wS3c9pS0H22YHUbleNax0N\nvmmsPsypFKFNbw0sya79bZ7/0eJepH6TqpSVEGt2W6W1Af/kN+rW45plT0sv\nihD8E3rWoKdtS4mF++6xKWz9c/+Nnbn3Q2/jFySiJXbXt7RVg/pXp+2yDTsI\n/LsH\r\n=HdMX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLYXQMENquhKsBKTEghdNf/0oLQpFmuzIlRYNWUaRceAIgdtrejG1M9Brxg24JZQlltSx3/zZgW5L1+vXBRf6WGqE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.d8cca3a6.0_1599168711012_0.9702807743877375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.26d34b2e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","@material/mwc-tab-indicator":"0.19.0-canary.26d34b2e.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.26d34b2e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fSw2jZDr8OtPMMWu/H2tTIqoPVEgWPbX0t/HnIBpsih6TS9DGJPmHR09BldfHS89BuVe7+0R9eHlJcSJi0eqlQ==","shasum":"d90e02fa0664ad39c90bd34e0f6c17f73f8739e6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWa1CRA9TVsSAnZWagAAiBwQAIz5yqHxpLUC7iAxYtJu\nU4RTzXlF0ms7HVI8uduBDlB4C+eW/6sUpMTHIkfrnU6BIfP/sVa0DFZm+vlj\nKEMqHEXBOw7V3EmL0WXE5977L5sXDBOTPdSjBPWVEd0+blcvHqwU2t1lj2NL\nCMU6jsU388PwFk6GFqeOCLWbUL3R5ZqB8+NZNnQas8FuJochPROwYXK5BKXZ\n+V1bvMgE6vTvI/HAf9Y/FOSuXVvIBzOPdOPvrbLP9nMI6mBm4RYZWwLGFuTg\nXpJzsZROg8cihE/1/Zlcyi3h2Of5fmrcRxUi6cX92sA/9qsFpv8CIet26cg7\no5zJ0lZDEjsu3qOjmFN4Lykm3HdsNEZ9WJd7XaML3y4D65Tx//itSAYycD0f\n2nvnuzHAN/w6/liwY0WrIuydzBFv4jY+cZ8dHx4MkYJBWPDAyYV+QOZKnbPa\nzcyrKg0aoDUnkcT5CwojDt/TxgAQik+Ois17Bqj1AxD67oGXfqlWI3qLl5cM\nbBcBRNvcdK0UQTOLZ1Zw2Y7c9bpD62BjSsPA0QDwjdoxkVGpIRYpP+3xRZOB\npTACPOp/cfefO2iIJ9/k2B6pRfxBN/5woAyNtPYE5KdGKBBtuoV161S6z7em\n9mXK0mAZec8r+CXe6Xmgi2gzqL8TTVXFLDdyF4FzMMlef8TtQHDQyBZtFEMU\nlLdm\r\n=VzyG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVn5Hg9OOXWZeU9FIt0zb/zu9I5bQogo8Q1s8117yh3wIhAKyAyvALk5yZ4j+Rqt0sqisZx1nBblsK2MpeldqAKCdy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.19.0-canary.26d34b2e.0_1599170229553_0.227100652310102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.a1c44494.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","@material/mwc-tab-indicator":"0.19.0-canary.a1c44494.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.a1c44494.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cpVaRwifwy+VrpiZGJfcu3Rk3KUVDX4K53v9Yj2Je9LkVCvjdYGHogzggHOftjty7iBWYD1+INDW0Rd3GbkzsQ==","shasum":"dbbcd3aed401420cf408ae097af683a6fc076272","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVI7CRA9TVsSAnZWagAAchIQAIomXYXjq20hwjOgXgmX\nwcmGDiZl41yDFar5MRVEWXrrONEUHyrYvMOIMDfai3DliwXWi2rCEhkrehkM\ncsidpnR8y7ggOQigE4/YeWj9XNPiwiFx23YUq5P2AqVfUZZE2G1BDoaQgjMp\n+eQfI/KuiGyG0GrikA7PdGkGsF4k6j1IWVMR/gLBR31D/kZLZIVBHRPfX5RI\nOe/lfYuB6cW2qafGdTd5cZ9fUufGcknt9KnjV+v5yF1VYYsN5DmSOIHBzu6g\nwlRYHxqxocYBQU4JWC4xC1NsdaHlTIkgepuS7JynJ5vcPuSmAMp8Kr4W7R/p\nlq/W9fevTAOaXhyCnMQGHJElx5f0G7DmLhE5eyY8OUm4AN0MI1Dz2lOm2+F8\n10f5FPSVJaaAjmahlYdezwvD/rxrZ3zNPk2LTlHuUdX7Dx55s2fi56XBjJ0K\nyGRLiejpIUvb+PBO6on4GEkemUlM9k3LvfoiXzMbytR2bUaNbf64jVm5cqIN\nBHTAVWJsY/h97azn5kvDmX0KOp4UEqfQ61D+SIsATkn4QNZULMqpLEn6Vbmt\nunOcQ89hjPNBN3tS/F72qj4GAwrhzwVpJ6zj5+2tFLJQKdXkjscHH8vamzlg\no6kKZt+LQVNAj3x/tTvY4A4kjp1u729cA5zbvKjh5qTxtlSzjoycrTnyWir/\noJrc\r\n=IJb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDhmKqycgoG8aT4iOiceYTYZ5jbQIoSp3vRyVfGWW9DAiEAxQE4OHoy+2mTwzEBzCdyUfPbWe1HNqVXhyOSIumk1TI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.a1c44494.0_1599689274518_0.8242974856112493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","@material/mwc-tab-indicator":"0.19.0-canary.be1cd1e9.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.be1cd1e9.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Zmbk2ySECG7/Wx/CDbHlda7AbLsAI7466wdKbjUPZbJMHmSyGnFPhae2nK2bufa0bv/PAC63uCqsfihyGXRamA==","shasum":"f1b9d042e0bd75974a2850bffd350ebea575e298","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcxCRA9TVsSAnZWagAAeDcP/3P1MxG2uG4MsWGeyH/z\ne4dmwuXd8IHkYlNKyuFKxZqPPwI/IGTyiRqunwKppzDtHgh67EYgkHZRk4np\n6xHDvsnNkDgQc0k04Up19MmYhno87AYBYW+RXMqd07BVsP5wXVI+rm0sf41D\ncA0z7hPKG8Yox8mppgqomb0GWiZRY4Q8kGNlVlqTLYjZGM/biplAvpD/UqaB\npj9VuBIs+dcobjKMxF04sSB5EOJDop1aHdF2asLDvFjWQY0zT/Ft82GPs3Nc\n572IyIsk+Cgiqv9ygGgJcCEZAkaUkmHIkU6Y36ZwHEenUx/wzWkIunRByRb+\nREatA/sqMMknRWznZKuaXLmm+9Re48pRRLCydkAME+hY1D+P6WCOeUitsoHy\nZiSYKW2hQXNyjpvpBSHDHqdEBeABXiMxMEk0i/rFPl2AR7+6rxk3yA9fUk38\n9ojU18KF8Flj+l708ox+jiiKVIf4iXvEy0kDqkDNA1AqEnUJJ1KQYKQsn68M\nOO4zqiDp0CaTH2kG00vNyT/Ox47BB+yFH5DztbMDkCMMmujMj8QAW5o0wBhp\nSh+pxMRwm93wIpR0ZFg15eCJDQqkiBDhQ8meqrJy11HHaxT9ZB6IRAazxuu6\nKzceBIuEKunijjOlmud/zN13SYlNoPWtpzIzEUzfcIF8PnhyW6dlwRSfu4E1\n3GJD\r\n=52e8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAa9lf+xXP5vDSuFbdpO+8YIMnlO3nJjlH0nBCIzsZC9AiB4gr3xlfzBhoc9RDvKrgV+assDRkvcJuhlPxhG0FfC3Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.be1cd1e9.0_1599756081488_0.8065891564023737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.f094c0ce.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","@material/mwc-tab-indicator":"0.19.0-canary.f094c0ce.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.f094c0ce.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-h/ejVYVpUwcY6Z6SMq88QVlBBJ4765gV93jw6R7jAa8y045IRMnQhCRm3ac7Gbs5EIKwUYnqpENsAEdPbOqYeg==","shasum":"f13639a1ee5b4a95ebce1f515535fee6b0174d5d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQeCRA9TVsSAnZWagAAOFoP/0ImOSeeVcQY0KlU150S\nHBHJ2x/wa7H8j8AEpoU031t0JxW1Yp92EtAdQPijXMjx6+3ZcntKhtfH1mbk\nCFghW8Auz0uYnRsF6uolih+miXGlKG15UJ43w7u/kc5dND6ToKOC6cKNxaMm\nMtPkKP30R0mShTM6DKbW9Wq2JBkYiOb+Eyds5UeKBIBd1ESXUKOzevIyFps5\nCIOPSxBYESEhv85CxPoQ2xgEi5ukb8RFsshau5oF3hw2qLeQ25PVSzFSUnvE\n9bYjVQiwp1ogc4kh84qTlzf2qztNsJKgz8Qyh6yhI8REM15I1DQSrP3mfP4G\nPFn7trNURKUfuE12dZG2vxzSUldIrVzOG2bwhnTyQ2MG1kG33i5uHpAu0j+O\nkRyfVNgq09JUsR3QZKpJRzqIPR9xeRLTK8uYtYc6ijHhpLTTaoa2Avoqugfx\n+eK/h2953prvdJXJCJEbdjaUj5lpRimHl5DhmxCEXoxva75orCB0os30Vqty\nH6Y4O+MYAivJXpvdOuek7VrkvIuCx47nFYDUPSgyJIeL3I48EEtN3DbnLdY5\nFsG8IfX5na1cxo+3DDj6N9bv5ltTbKZ4uLgeP+hBiZmO8JhxijZh1CKQPK2M\njPwvC14tgPTvD8R+dqcEZQzhzT2WcvQgs+YAgMasLAp1UX9a7KFnwH//eM6P\n6Vz/\r\n=atm3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdGliRTl/yCyy6HkHQidFwIDJVqhIhp3eQ1wuH3HT1kAiEA3IdgBJVTTwL3iOSxmj0IFkqGOdMXycnvAiqXWzCSTms="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.f094c0ce.0_1599759390227_0.12246146548635894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.c1261e7d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","@material/mwc-tab-indicator":"0.19.0-canary.c1261e7d.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.c1261e7d.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-26hetVnfaYFdpQiy5a9QTlIUmh59SUUIZLRKfd0JdSsblZzHHBeJw1lhAoMBh6sx0xD4YU3elyof1SWrE7nkdw==","shasum":"5f588d3c3518548b880d6bebf3cac81debd8eec3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBcCRA9TVsSAnZWagAAoeQP/2HAoC91bytte4jG4XQO\n4o5+2JKZ96ulIsjHxcGps4ZmPCYlmdcdPsTVJSXFxnq/Byam0ZeIbMZcDG5G\nbFXGvKwuBNT/7PJPrO7IofPsrp7K+YHE0Nutc0jaAJp0X9xv6iioO9Cr9r3i\n4SJM8L/h/uv8xgMBBjZpGr0L+xqMCvSFGbN7IyDftFO2YlO8IwMpNa+SZ8v9\nNnjOmQ+XwN+DvsZRDte9D6ADj70L+x905xnaHG87SrHeS5QFyVkICP8PAvN9\nglOjRwIoAKiJwa3HyX8kCoLua88rQGNVQvw5VT5mX+B/t9mfIH298x07wGOk\nFWf3cRngRIZgReCAt3yAIIDZzKW4CNIRhgQiDfo6jBF1hOZYAz/jAoPTcLJN\nBBTojznOvw7SMWrV3uiYBE62f2Y55y3vPAshuBLN7a+ms5fSMFGwhL2YBk+H\nUgysEuiSeGa/wwebMZ5tWW4OBquRfK1dPvL8ae7qKUpAQFKELbwSfhc+ue0F\naIzkGBTG/HgN0so/HBLwcz5hM/QiUttTQjxxknaK2reUYfjzfZ9k2SarjhyO\nH0XjDkvhlfo7cwgnQ0yVkUAq/4kHpQTYDStcUJpQkPjzf2ucdwQuuo+iio5h\nS7y0BG6f0dN8We73R0RyIJYb2/NIsasmW3X71gk4Auv/wni7fU31TT3dHkmU\nBIeF\r\n=KfnS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTGg2CQOPdO5NmR/cRj1W/FXjElyoHRzPaLbD6zK+JngIhAIRiGjl41JKKt7WsXyvOZZa6FpkFjfPBV683xBr7II1R"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.c1261e7d.0_1599791195570_0.1486551774450635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","@material/mwc-tab-indicator":"0.19.0-canary.9b39ed1e.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9b39ed1e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aTNJio0lOUYVEzWYpd0OMSYEE4qsLYVzJC7w1XKeluB6kyPCJFYP6eDYqYZOlfUuKPxjHbFkTJsZFex7VBp12A==","shasum":"e8e81c80d58e6f9380ee1e26bf55f5ea15944045","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCRCRA9TVsSAnZWagAAYyAP/RpZBtW3VxsgbqtfyPPg\nhOBZ28K11dHyzw0Mmk+Jwugi967uLMaboRWGYI9v5MKz/NCoVDK/+ql0xqL0\nRLv1XcZ4aYnKmmc3wSq/5jmtGDIgRNvWexOoo0FE3OwgThhjA3WODx67KYne\n34ap5xfPdcz+KcCfD2TJKYWn7gxjES343P6VPvQQnkKeaeGNXPoCP6a0M8sU\nhWeisnU6oQEfsE2cOxzXHiUwhleY5c4baQnthz/TU4dkgDAZdnwWHi3eDIrS\nNYUY+N4P3rnKeNXIYEZ1SnJ7FjWpK6p7fOSvVbiOJdJxGrbFwICYMxB4lO8F\now5Dp43nQ6B7pC8CFsOdAig8H3imSPXWp2avMsApYW4Zz+Qd5UCi90pZY0ec\nAJRRx5OHqYUqIbYonT4PS2LarFfNo2EEw56Kjl9EaX6NQP02H+4daGRgwGPf\nhlApzHo6aq9pkJMbPj2QWZrYtlqsbove0+9xIvOBanGGMDGHIsK0HjqDGK3Z\nqHOAq/fg+tExQMeHBzg0kOCcl0Hth8ohR1lBeTpU96zIVyDwJ/n1FHmf2R6D\n4IQ0pTmII+VLLTZ2u6d/s0xDP5e4vdZNFn5jZkI5d96GlWDn5UURddXyXtgQ\ntu3lWVxRYvXVPiTT0xdMXbpFNwr4njUNMLFryBivQQ+unfsm11TwA9uV4trL\niVH5\r\n=l6B+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFk6KfrOo2aEsDz24y1SkHB1mBCz26t9ACGBlb6mzbCwAiBS3zjwPSpa/50jsMnfUKy6ME1Yxz7PUu7PS0L4auYHAg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.9b39ed1e.0_1599791248973_0.9076712621308829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.e67214b3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","@material/mwc-tab-indicator":"0.19.0-canary.e67214b3.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.e67214b3.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DmNeOtT622LDS6benVZ4cG4jcvzEkwV//Jr51r559BqlHTf9EIZFb1mshZVus+OfkUi6Fm3Yc4zp1xLrdOhNhg==","shasum":"c0cc71a56c5a15a5bd9c4f3522edd14ed38fb76d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGUCRA9TVsSAnZWagAAQg8P/i5RYJ9J+Z6DbwdB8Q77\nhwm+UJnIVXUA2ZjDjrQA+FtgsHORkChFYEL7qnLdcy939QWSyMqCeG41ubrB\nhbEReKFyoEq6cu+r+c1aElk1vX/zyGKdeZrxtNmquBL+RtlC8czPHLpKDdcw\ncP2efSuXdadQ9lmE8WUIK63X1ilX/NUQILr+zeDn9QTbWMyJHEio1gLvOhzS\nvdkD2ObTjNTeWdZ8WEdYAFY5MeHLyYl7WF/8BzsLsSnm1WarUlwhfD9F1oUr\nK6ZPXR0Ulz1GUTsElRc3FcFWPDRXZwZuznYo0CFACW0j9nDHdL2WeBTICjSG\nYB9GzKTlxHhmJQEphV4N6/bTsKeuvpjKlHnQfLtu94gpf2sWsxU3TtW3QRbp\nOB1OTOJhg4OG8lVkzpwtaGcwN05ijAQTxFqr7uuh+mBkstMK1F8j8PtnvZlw\nCJm/dWg83dh1m0XqMEkLRBzqg8l1FfZRYFVPsycgbxc/fxNrGHdDl/tu7Toa\nrT+DOgIGCK61AuFMPr8Kp6Dng2da+XmAeu62lazjfsIn1k0CX3s4+l2Ng3JL\ncR//aQH0ecqHodTlFXrl7IT+5rxpgWcaOMoOs4ZyzT/Ykkrhmp3lJcDvjRGm\npIS414TwFCuCBm3hyDB331LThyLE4sS+gQVLJLybVRCkHasX8eIodM0xUrfy\nRlG+\r\n=swBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3d5Blqu8Dw00HuQDANzDCKx1ivkgIwXknjlcvKe28fgIgJQbb8Q+cfm0qqospgNBuTphjez2CbP4bmS4oq+qhs9w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.e67214b3.0_1599791508048_0.5591320795317769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.36f5da28.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","@material/mwc-tab-indicator":"0.19.0-canary.36f5da28.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.36f5da28.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MqWHZRhNMx7vPSPjkaeaeM8f/ONhKuZKUJXWHiJD18snMs46fNbgA5IrMvjl48NqrNflhtLRsBak4r7icp+SRw==","shasum":"d949803b65f889cb34da26463211a99b5e9a5b41","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuI2CRA9TVsSAnZWagAAeIoQAI5STF8bL7RNFOeuh9Ed\nBPFyR/i+5gQDuHWAsiQIQEh3v6seBlr3QUXFWXcS3L0zhPb9Voqen2O1S0Uc\nrcgvmO9sxNAorqFF7B4qFcoyQpMFJ0TEPM/niGqGw7Gtx92b3hAExXWdK6sI\nSyazODSvlQc/sMF/6M9V/rjBuZlVNHHxk9YLq5WFBf6Zrzgk/haHlL6iYnTi\nduF3T7RfZtj1a2P7lDhyvqGEws1J34YPev281DkTgc6p4iTyMupYzkQIqlcA\nIYMrEbauVIeOB7udt9ioghs2AB7Qw1ukqI/xFFCz08D/hDzmFDdXczLYajKh\n5/oL42GZTd32OcnSIycqexJqqMIIXlUwKTHm/zOp5E5NQJlnAMcevke5ke5x\nzAuPbMQ3z9QvcPHZtXOmPTDnq7R379Y7jRd5yGAVE/3YjjNvmjeR3SyNjfeo\n1dldo/EcA310hs0S8wVBc32rG8LnIEuwEEnGk3DoCDFHyRA/N62leFKhb2e5\ndeQqfRob/e7+fqRjamW9lqAR4dYHvbzdKOeiriQE3eJX8MfuTf2Vmf9mjlUO\nsozV0VeU0/DkRrHplhTGZeiKadC0giu/ze8dtzzSNP+YAWZ8kdmCyjZr6kNP\nijjd0Zcvxr0lVHBhWIFCM+dtrTv8jZkEF2P+qaT+yWd6JKyHGECtEQoGRtsD\nT2gu\r\n=al/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFEqv04FrTg3Ju7FdnFiNBCwS/mO/48aFqnvfB+MaM5AIgW4TLVHRuy/lqHEiFhDX4EbYrhDjnWfVSe2i4AHtnMPg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.36f5da28.0_1599791670143_0.9060323360589397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.3babab12.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","@material/mwc-tab-indicator":"0.19.0-canary.3babab12.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.3babab12.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RuRTVmQPSgHX6TeG+CqChmBRBK5UbUUzWoK2YhhdlsrsQwCK3NLDrH7meC6/t3HBv8806iE+RdnJRcQht1mRZA==","shasum":"71d0acd7309c6302e8890f7cbd1f6074f491cdbc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLpCRA9TVsSAnZWagAArYoQAIFnT9K/+KfNAjYj1S8P\ngg5rX9U8OEF6/OqW37knj0/g0fhG1piwERvZS/tVKGjsfgy+nf1XjiKkFhVJ\nvJtlA/c65yuxe8hgOkpcD8bWOZRETCtDnqItibozXYSoqgZ0AvOE66p2J9AW\nU/Rsu90H8oZlBvhIZ62AdMaTlfo4zkJtv0uN2OGHjbCDzji+3OHTC4Wrd3iJ\n7xe7HKGKGdixWTxVtRUrxd2mw0lo7iM/NmrcsXwCPya4l0/UUF7VGN6/3bZQ\nT4xwdpz+7LEux90SwzI6m+phbt1P1Jh11nGCme2mT9KPr4dpQ6OWBisQu/m8\n62Kguaq++dszAWdvIPKJ6tMDPduBUJbVnIysurdNFMtWE4Q77eO3kvKXqDs6\n2yWKgyXIaAU/spDUj7jpYuEWm2eKdvANHUVOmCgyJMagiDa03DU0tlam5OWQ\nHogZICGLSbPCnEK4x1YRZb+k1dnojq76lh229pzwsQ4Bj/mROfn5+CKGkIVr\nNVroXL9v9UVfo1BzP7zN5yru+wiA+vHH2djThoXKSYdNmyxESFbIT96xG3Lc\nK+nJw6Qmp/IQR8WSr2gsbVUWs6cCoEVJqUD0tAky86xbJFNlz/buTRgKkvaz\nPzSMxhGa5A8DzBejipFNG6IAPrLNvfQzpPdR/DiSiRkoweVWFXu+BKOlD5Cp\noGk0\r\n=H218\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBE/32PRDXoxXgZd1g00AuOVYIOCKsJQJSrWJlkVTbFxAiAfVNhabAg9T41nQtHDhMv1ptxE0azyekDsgBI44lZgYg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.3babab12.0_1599791849577_0.10245955454650724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.a4481e6f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","@material/mwc-tab-indicator":"0.19.0-canary.a4481e6f.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.a4481e6f.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-m/rn0+IEUjAd+EQIYDQGi9VWNZg8Q2RhaHNwliB+L5i7EYOnqLuuWuWsPhUkYvq3JNv0ViaNRQns5RmpgXm70Q==","shasum":"9f326483c8278db98584cf01fd01a07c6c4b9de0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXACRA9TVsSAnZWagAAtBgP/0NHaCxCDu9a4Q6Rwwp4\nBYO96j5gP4yybhAaKruLETJIV7bX3wPiz3E29qiQMhNGdh2R2OJg9JJ1f9gL\nUtGRET3L17WlJ+XrwSdOIPZbHaZVRf0cI6VREXhuXMylQjlhAG3v/ntMG6ae\nm64UOwFyA/au/obNp+M3aI72Gj6ga9FjIIEzjsZQfoc44CyNnUwikgL2SnZr\n2cXXAFQM6i7OzH2d+3ZlWORMOYyHoqZurB8FxtapIlZaPYM/BoWdXmIzPNSy\n1V+sVn9+Rt7U785C0auxcwtA0G816cSgj/I+lSXKYHr6cW0XkhbGc/hqAJot\nDRlaZVyhpOjAtuGZNuatQg/YtVv2/g6g9ayLDuI2od3r34JSsPrWyCvbPBm4\ngxTwQF9IVynwOrGEZDTwhSIFge6SdT+XynkEaG0rpRnZsybAlF9TJ12VFdgZ\nlnBLLNrv+U47vGW5R4NYz8jE0KjlLKSPBgpNfR69C185z/MOcV04UZcxH0Ug\nkgE1bdgUi/Y3daMqzABvxFgUx6Cwxh7ZiEO2PKZkPtLgtAOYRCG9yeJB1gg5\nxuhCpip1n3PvLl8+hpvxFwCCK3QoeBWOlTfIkHomJozvJVoChlYNzUyDk6pL\nTb0g0RLsvnZHWY5JdR8C95vOj88+gazXncpt6xmRW07X2UAkqHUxqsQjgF/A\nGSKi\r\n=icEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTtXe7jyDJJJiNQIdERiVbeUhzy2XLp9w58r158X6O1AiANJKnHEbbz0ZL6PNrWUMZBc3iYNRF9cITWXHJNUTiabA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.a4481e6f.0_1599792575814_0.01023993460151229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.a9177836.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","@material/mwc-tab-indicator":"0.19.0-canary.a9177836.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.a9177836.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cdB/yNMQh+LOYvEOBFaPw99TizcHxYw+uF8GD6mLrUDmqWLagWK3gKMfb+2YcZXa2q8NR5pzx4GJPenj1fUmEw==","shasum":"7073a4cedd9cd40698fdaa75217b73623306335a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hACRA9TVsSAnZWagAA9S8P/jLvHoN78RcTnKaM7ljB\nhcuFbaAhiw63Q41OXlvviE1OafZa3QIg170Gz2YGCKcAjNsE82lFkyt49LoG\n3uSEoLntcxkxtbhGsoHqG3gZHhJgtgjiuIKv2mixlMCTbderdzm1FRCutd0R\nShwrHsjVAPHssv39grwb/hUnTYqcPT8ScWLkVP5w4Zb0Kf9ZUYaIVjP7PnKn\nzYTk+epHNF5iI27l8EMsqupyCqflhGrLjm6z4ADRONJcf1tXy94lyXiT5USv\naenVLZp73PTcqm9OGS6TDLLR7yUFAIJK1Wz6BxFEYd8TEAV02zmGoeXuP6Yk\nusGTNAhHwZUI/A3SqTABfEpq9bpqOkjv77un/CBRfln8Evbqle4eknvmgIhr\nj2EsMhfiqeg9UMs6jhmMBQN1GEawzex4eLDXjCHIYjCHLWSdznbJLz0st56O\nQcyGVlK+U+gTFdZxr59WDLJtok650tnTLq3qzDmJGQQZl8a4T+L6lPnLDSHi\nknfLTrUFp8SiSXAklHbyOLtwSE6C2uc7wD01tMX9zkiZk9pgrHHEstvcWZau\nJMiJnWknmNvR/2nbxAzExRTNmY45Bji5J9qXv7cPBvc7GEpp4waLdoqammlu\nR9laNViVaTuVVgcAz4yepplguHv/ClcTaMk8acOt+Kv2JuKh2yEzl2dkgCi7\nmMVi\r\n=/jcC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7XVkY7i4FQoBywTJTJfd/UPiqgAqdQUfxBqLJWxdTmAiAtu/Yx0QFjhke4SmAgbZxBj+457r8OpuUhvQ3qTHUX9A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.a9177836.0_1599846463845_0.09741531037330287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.b102a3c8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","@material/mwc-tab-indicator":"0.19.0-canary.b102a3c8.0","@material/tab":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.b102a3c8.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uDcdBzBLumLdGm3fboVKX3ASStue1qJIPpbmDB/9XzowIPqxdysi6fvEzh1rdNxhXV0XSpT3lZk39NkbR+KDdA==","shasum":"af9ab35b81a41befa497e52df796134bdc61985a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87uCRA9TVsSAnZWagAAAT4P/1gW+JM6hmBD//ePUwco\nt2Vw0u44QeNb0k4MNBQ8l8VvtRh9QTbwC/IJB0PKQLCAakOzbFhE2VEIAYXa\nzzlwILO9TqcLNMhhZ0xZT7Z75CdwLCtGJvWlXzrERTvv7w85PYlSWvG90myq\nVs34gskrvDid7wym+lvZMlO2u526e8cxx9ir7Wumrc8ibpwC/dP0ofmG64tK\nKJNOWFmuSAt/oA0GSTuuQF0voBpggHEWkPWBobxeVSx1E5pOzeD5xb/RcAqf\nyV7RWMXbXpK0jmBZJvGDLOmdhuQVejeX82ArlN1yP4PjKxV4MVQi/XNv7W9L\npyOMvGllWTPctjRhHWjvJ1ox8lr4pRikpARxwEkDKx2/VFLBd4IqwF/xyNCr\nY1yoRKPZtqayW/KOVCc1z0Vd8vCImQ8dhN6S9I/BANJ2w7A/UzJQ2Z2Q2jh+\nZxZ5Xy96VR7qUu+QMVHJOx31xIFwukSYFwGIldpls3JzFkQh/qRVDFd0qKXX\nOI4IKFdNqTgrOBIbbPAT0wIZL9g13aHaErCtr7NYJPLM9yoObeYDrKTk6IXe\nS92PlyS6uPOYYtlTDQVU7rvK5QR1wAN5QYr7tEJykuwLVRsiof30LD5YyNk/\nlc8DewMj+ypGtvucWDVf2ajrLhOy3tv3c8R6+O2G7CIMpd4L15iKuWnNad5n\ncqX9\r\n=sAiB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqDmk8y5kkdqSev0gPhvujq0cTYf/iBVgqvbzqpdipUAiEAlDofUcAjcn/eCKLcb+96ZiYa3aAdchi0TZXRBvZANXg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.b102a3c8.0_1600114413692_0.0712588469269051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.a7fbc707.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","@material/mwc-tab-indicator":"0.19.0-canary.a7fbc707.0","@material/tab":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.a7fbc707.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q/AGHJyTc4asV0ZoKK/PMsacYunV9vetzWNa8V/5Bt+ey/1NA6yUlSSuKbUMt33WTr5oRlzkk09AJT7FpwVUVQ==","shasum":"fa99617bfab43f9789d86fc37c0f5fad2b670d17","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":56584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZoCRA9TVsSAnZWagAAQHIP/0fjRFJTCX5lrNfXC4Hl\n8omhF+7rAzv2ctkDcBCfloWk47ARah9iP5JEfNk/OlEDoSLmYOYEr2QZxpCU\n5Fr62v83Wg8ERNbYST/ymFnT0aBsbHfxeyDyefXNFKc0qYDDkP6jUmpS/Ydj\ngUz3jy0XLt+G3Xl0m7hvgl8NDwdcPoZpq0wLUVz2NK1qlogMPoFBCh+9lhMK\neui8fO9IhPXt1H9MN9yQRMiQcw43x7b+cwoA5QB4whkG1+H6jgzWlvIJw261\nE2m+euD0AjfkSnr5bABK5h8dsN/VqTrX1ECJxErnYURN53UsiEmH2QDSSK/T\nqsLPY3ASooQy59iY2AuL4+CippKpa00wJRVwvQXurZoiC3OCU6qoIx7/NyAJ\nouauZAZrXggIu3hBgDM9Y+EWfkKtlZOX67/jZCbVpclwQkPsjPeEuN/0J2JO\nT+MUlkDrjcc3cMNwsfVQiA/xiqPQDoVyKP0gNFbXZWzDS/1q1hoCRjNQtoxi\nYfVCnmC1wFa3ve9Y+mz48lDyn3VwbwRwUX90ck3T+pOqAG9VzyFyTJ7cW+wU\nKqcfBTkDXaUDEeTKwsREEk+7AU8D/u0wVQSbT7T4jfiPlZxYe8dEbpC3UNVB\nEfnlPLW65VqAALaUGeRMMUoDxXfPFYleO0wj0Mtf8YfT0BBuBJmvnn0Mpp6r\nnUzh\r\n=PzAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAQSukFTK0OyMTQGBlS1364gc8pWPl2UIP8zD3+ymCjwIhALyphcRzkY25LcGu5WC86fcrSXFohCrcxgiYNacdb2VF"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.a7fbc707.0_1600185959935_0.6332665558869761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.ed6b8660.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","@material/mwc-tab-indicator":"0.19.0-canary.ed6b8660.0","@material/tab":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.ed6b8660.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iUBqG79wyCcPFEdL9BT7abNg7xcBlH/dBI6bHHjfWgDun5DPO6oOh5bauoooxPKP6VGI/FT475Hi0vConjC6Rw==","shasum":"86dd4e57cefa804e2342ebd586edc4f2b53ad395","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjzCRA9TVsSAnZWagAAxAAP/i274uV9GWmUx8sdjiqV\nBCGCzgSgW4SxXRW8rP8yBbWJhvk6YkC9nSyEg4xnQJJZRsxlq53RfvWW33Md\nhTSWDA4pO7W9JE0KcAGyLljrR9n1MiTAKUKxYNbsj7tyJIAlG1BEduJ3vkXS\n7yiwQ0SN8Ba3macub6yDuK/wuewclD9C2QcnvjLzxv8b5sf+AA7Va6u/P5iF\nUQLp8qko06hzbjDP6NEKCZCs8L/LbGkUil1JhpnUB/I2WoO3/JnG64JN5Ql4\n6nJSaE/lKiD7fwl1D6VE9tx26YOdLm2nEM1Dgm4Forxvpd4y7cJU4uxwDLlt\nyxpWv6axyvaKLWH1WtUPxL48PuZH5RJatxZGOTtRZ17WoH5VYxTnpbFOui8Y\n2HsqtNMtt2edlEX2OtK//E+UNZHi/GhPKaFjGWbs6Frd2BL4el2LV0z5YnkY\nA8BwGLjtqY2a3wym9kEF3l0bq6FIoO2NcszJEeBTTnL3ObdtgY1aFcPJuomv\nrZvvm6W1Mo2xJCfnjs+bW735Gd3ChTKivee1/Lme+jMLib6VFBxJzRclglEU\n0BLs02gdNBBSjOCotprFKyCSgxvi1BqPK+F7q4be/YIMaoT0w3JxE96WHvGE\ntLdgxziqc55KFg0AhKxrSwBseA6WKAFOa5F7PmRhfY+9W43TQX0o8qEYKebb\nY+oK\r\n=OW2z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC39SHiU2lBrS0VszY46jB0ZRDoDbtua+pCrAXJ52s+twIhAPl7YeJ/pm9zsZuWC6oY16F96r/h43v/aNY9ynvQzUPh"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.ed6b8660.0_1600190706928_0.3482599765964469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9c2331f5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","@material/mwc-tab-indicator":"0.19.0-canary.9c2331f5.0","@material/tab":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9c2331f5.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-o38RsYthNuWA2yT6EpZO0b7N+IBuFKxjiH8yKdeJIeaGACaYVXTEOWX5TEvk9TJdhFuWcHqnDdQpfkcoQITqDw==","shasum":"5cb822498165ec126225c8cbcee0c8445ed77859","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6xCRA9TVsSAnZWagAADP8P/ingRNYzg3PkRDJFxRmT\nFO7x5QmMdSQCs0F9G+JwZtJFIS7W7O5/5weGAXp+Oj+e4zr6tHAgzh+lZVMl\n9zto6/IFXR4rXYi1AzAm1SAnUJ5bE2HG4U5gg/dZEeETwZ26SbS0UFarDBE/\nr2kAxGy4p6fGVu7l332PGwR4lShi2cFjWJJ8GARzWSqmwA8w/FRbGh3ZJkan\nPn2S5JzUEpKsc8ALrSrV/x/r8Fr3zMhFMs/KlmMTR8eUEbzMJPlXPS1jIWE5\nI6AnlIP/VDjzYzJpjYWAIRnsqzjUptrsFeUg4wfv0Cxgk4kRs1pwnKD4i/tg\nW/uZcefKsP0xwxwdabR6PSOjXAZHTepP+kf5XbtOwYfL0apdtu9LesHSWo/S\n8BaWMqT5UH3uKrRAipguuTeB0/Bq7odvSRNVTfjlq4yyjCA//PNWJquj4hWo\n/CLPaxhu6o6F0pB9d3KWA7csj/orLigTdOEVcBgFYojrcm+YGOYLXuDk1vvX\nSoCYfwZAANisy0QMHFzE82zFWvxtJHwaqwD70Hb4UWX0/6ayPM677j1PbwEy\nd7iYUdlYUqFpDcMvnNnPPLnPaFLL9hHXFyhkme3N2levVRAd2ECclFAgyn/A\nR2t0guyMCIsRCqtdu2eSu1LJV7Y/GfeJXevC73smVklDf/6xmsWIrucUUh2M\nEC7R\r\n=D7C0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDHbfFDz6KuSwQXEJbvPXSgfmi851+Dck/o1Q8YuMoGAiEAsDkxaG5IvHGjS5eiswg5LyH9MZ6lrOz/dIj+YgLRyO4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.9c2331f5.0_1600192177312_0.39330023635258726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.63a5f088.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","@material/mwc-tab-indicator":"0.19.0-canary.63a5f088.0","@material/tab":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.63a5f088.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RjSWALj1jIYullOTpQtWd1XDgp7ax3pRcaqcCk1fPJ3S6BPzDCFOOKm9OmSpakYjWJwWdaF05r2Xjn00cvtLdw==","shasum":"6076e8cd8688c8e6ae148d4d429a39517104b461","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXJCRA9TVsSAnZWagAA/f4P/0+IZDAYtgGNVENSZsHm\n9I8ycWw/emn6HNWJJhFn79k+kZYd9eMXiSY9oTsQ6LdAU5K4aMv9LmrYWMCe\nh8V9zyyrkznGvdUrlhO0ag+3xdSqYXD1HPeOuYc3znia4MclDqZSaTrrCyec\nC9DQy560KLpQ+qXT1yn73ZJQga8lnfVfW1J4t8yx4b2JVzTw7OKaaEoCKc9K\nKTLM9mTfjV5+RTtdDQ4L9ae/u6aHvMHZOZAymZjumKe1v8dxwcMu+ykOeErh\nsDHNTyKQoJy9pY5BwRuhnvDcUWEpm66ZuLQDhhmf+5vVFVAMoMxMJ3EJyE7L\n4XE8rnmzs6rJ8nbyJWrJWNd7UreUVI7hFwDy+2e6lkspbBS0yQ22+n5JLSU+\nP6DszxZ5FWJIpu9AQ27LmFPmwJhXC4VzYfWfEVqZLR6fWq1PTd/RBr6InQqz\nWQXJpxaqWg6GzcQZZlasN2zumoFbM+WJt5TyPV3/g/urTbyoGk3BIkGy1cpu\n4GFUanaWWye6ssXz0+euLOiYpvygUMo6VNBNuLw+KbT4ykp+0fXOjoznCv5v\neG+xT/gtOCpr+r6HQQaaLlTWzc2Wwo8z4CZpvpRE+x3sdT/VW+uLz9XU1ecC\nqyJQ2ONm0854u/yJkAexDYSSQBix3jbcSb8Jyh+MUHuLVuuYOD/9TH5ChFsT\nMYRy\r\n=Ztja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfHULqlQMtdQbeGDp5Ek2sNU1SssP9wUkmLUAi9wy9AAiEA0tHeO9o/ZOKQPqpIUpOs99OEDPdlGARrM1qMShx+bu4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.63a5f088.0_1600292297087_0.717377093945593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.b7995e49.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","@material/mwc-tab-indicator":"0.19.0-canary.b7995e49.0","@material/tab":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.b7995e49.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NS25oxoNFOKhUYuDire8fSlxGiI2WaTBhfjab36tfqwKF0O7fpRTJKfzp5sia0HO+Cm4GQl9P7faERM9QyYxXw==","shasum":"ff33e1641d1739e9115431fe2f713ba9981539bd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp87CRA9TVsSAnZWagAA08cP/1j1lMjiCF3duwRkJ4uA\nNeKL52hgV7W04M9MpUfd9A5r4VwFliWK3Piduxk2TdT2ChxZazIMI8mlcXeB\nERBM+xD0Rqvyx0XbIbQ7lZUckg5rfASHCFs8XBrL+cCrvxJMkuKAQla6XE75\ntzYOoVzAXJQvg3wWhEwQeiMR+5DWpnAG09gRjlozAGAbJfNao1Xdt1P85RyH\nPd9bp5i6fi8BpVXk+ktTHWHtagfYtgFHXychwqfkuHFql58PvBU1Nciq8fZv\nZ0fN8ipzAMuMdtWlrlzM8v4I8qC8rO0o3xyT1UwLLMd31+X0ElEheOOoqZ8u\netoSe2lkOpQzjo+yEjf373dGfIDGPxCvMcZSJcIWBN48F4+cxpRfCnhGbu04\ng+3uvlaCe2BNp2qxDa8dLjHyJZT/42vIJ8Y51TMt47u/YbHB6vG0+S9PKKV7\nWey2mjz/SSgDc/uAgNuMxk6BcTMRx6Ch32IKSMeRHJMS8FYeVRnFyesLUu7C\nwGmcRJVDyn9y2pefxJbCAYso9eE8j48Ood1c8OOzNOT52KlIEcDeDPiZ+hfx\nPPOMEV0+QVFoLa+IZ3RWPxKYRhY5GKmzzB6wsFQZYCAJxaRwWCnuAkvF/PuB\nEo5+EY7WVKkBSKKPE70jpjiUlbnb8o67bK8LYivs76do0O8VNzmIx9AwYFH8\nDdvt\r\n=m3Rs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpDHhIFjp9BmEbHBUzrxz+PovmmJBi4MGGzlyzCPGIXwIhANbGGPcAAUcGFcI/CYnNlFgfxmC4q2C2ZRgUUNUqt6ar"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.b7995e49.0_1600298811169_0.05917023773456487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.0da3ec97.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","@material/mwc-tab-indicator":"0.19.0-canary.0da3ec97.0","@material/tab":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.0da3ec97.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tGc2d5IIDyCbL3wRESgXiSHUGL/+jd/eAxC9vIkT/zMVwTxRVUzCBWsLHAQrwc5U/OjyeEfScX5G10txDD4aoQ==","shasum":"5e76ade72e936f6f98392b783d399e28f141bea3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSR5CRA9TVsSAnZWagAA3jwP/0JiNrI85boOH4gPecg8\ng2DSdurhpjPj0lDdmuy+YrJFYxd8xfjmZKwQfxuu3V1GuqG/9sNd1o3iOx+a\nhiXptAQOTHmF2gBYyNzePPXmUEUSml3i84je2VCPfikWrkymg3HfE/CeiNtP\nMNlfv1MMidv4JcSUd0380LRt0rc3AnCnywWxxrsiaxSVfXc2+AYoHZlI3zb8\n18DyN0altajGqLdA21gEWZA8RHKg9ZgNSAJcuAhxLoq8Bjj7gqyYumeGNH7z\nh52INIyNxmGWFWW+HRGDOrOobB8HyXrLQOj3KwfgUPcyt5MiBm7nMt/03u+Q\nDx8/zmrTPO3J6NG3Q2/Rzi1Ypf5+pY7vwTKxaVwdxkOrEYHhb2KMd/MU9+Od\nvw2MFb4hdl4glplobHdnNvWKdupfsbJM+oPp46BawVdclVFR8Wihm3AYVoXX\n5epFLblUMtOtbQ1fXxHdwLW1sAKleWRmOsdH9eSaaAwTlDxJJOvjQDfo/Ytb\nebp/fedVwgDjBbLmipUalrA0TCbrTzXb2yCm1VRrbQ0aVleiKZkPj1TkrXK5\nR8gKnW98iA9S+A1QlNztx0zeK3JIzyAUz3w7r40M1z71/huszKIOmA4nEYXf\n5LS64EwXXJI3A8pVHCLt8oE01l/6pSvcBfLiNEJ/XLQ+2rQmiQhNzjnqCcZ+\nWAcS\r\n=mKWB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQo/CIngpN9pAcW9FYuaF6rD8NcoD0ohtyQiPHfFlV6QIhAMVoIhfdvaX2sB4S4ANNyJR3HxH5jdMikXwhwvoZS2i+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.0da3ec97.0_1600726137102_0.7823323608554631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.a0793c96.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","@material/mwc-tab-indicator":"0.19.0-canary.a0793c96.0","@material/tab":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.a0793c96.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vGyrYoxygZ3ToF38vHLQ2eyP0QbfVjIbZWyglnQRHmfoHZgr3EEEej8hFbacVXhGINB2tIzaBTlNg9R16a8RKQ==","shasum":"a264bc70da2f398f825e28967b2fa15205c346ad","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6wCRA9TVsSAnZWagAAS/QQAKBceQHealtpBmAYoc5i\nYSt4tCqdNtiBxww8SiDVJh1/Z9FpSoXCsYsUOjXNfveo+Rp8FZzofpQm8wwW\nhm/k5OSeGEQ0Tf8NZu8YxA0kj8gJ8k/7BxMlOMmbn90S6fmX072LOKf3MCpS\nGc1xkGfjOB3Y0A+umsn1JEQa7zPTpxP7FwNE9Yifysyp1kr3ENj3D0sGnVZM\nYgEVkBcjDD7to5UszULf5qjchSicZYVu7IlzxtvBkjag83Q6ong0tlZNDUbY\n8wPnORULfDQP1Iz25mGJ4ETaf9SVH2YVRAIzLRTi7S6+3ExJ5h/tzD7tg9D7\n+ZmPpim+KQZHH+7pzI4DPrSBKMgWUxk2qTtSIc/pq3pW2/AKktUZnGgO6ycU\nmFNsqM4Ba1ism9H574di59OpjTe5hOSO6ZjsaCEh4f4yppCmLtmbdWIFdMqb\n5F+trxToRof/DF2zWqqs0KnVHKmvMLwJLw7mDvwdXZTjVghWd2EpH4Uv31fy\neadsIriVrSxQYIzBJSfb9Dj3Rasa/MCb2DtrzPDC1muwrZeJTjH59MNc/rte\n86DQfxlR7cPpbbeBXIWJgnI9KqA0rqIVnRoWZqO/3C9fNbFLlFF74w9Z7sQ6\nx5H0favYH3a74jB9NSHTEZfZV7YQ/DA1hyoOiKMRtDxkquEDypx6P7NC1shx\n2cgB\r\n=UmH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSGAwwkuKU1npzbKKQpjhEOKu8/qQADJvQdLNyXb++GAiEA7cTbbbg7BCDxy+hQpSPvRXyM2ThHG9/WUWuuJwY4IKo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.a0793c96.0_1600794288203_0.08940999159009211"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.06998a3e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","@material/mwc-tab-indicator":"0.19.0-canary.06998a3e.0","@material/tab":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.06998a3e.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-z9UkQLjwc17e4vzx1Mfb0z5SM3/Pd0+tBZrqqA/TQqv3SX/o8FRizUSeYJVM1e/P3w4lZM7Vjpj6itIwRK5/GQ==","shasum":"b8e14060c11326035236126edd79f016debfb1d8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakG5CRA9TVsSAnZWagAAmKoQAJ5ne7qoIkF26XAaBCHT\nX9ptj48kGqFFW1/OTmgmDnJMMfEoExxl50IDmoRrDXPjfk+q8MZAxVdAHQS3\ndbj/4vJARLAHwRwzBVoxsmI84SvBzVdiBDx/4Kwh3cvrql/Z2Q+Mn5OXxLlM\ntf76a8gsyAY3aGYyJjuYGdQzXTsBSmT+bRNfKn6aRJjUV48jCSY85dSn+l+G\n3nd7Kd97zQIgqBd6FoZxUjskTL5486drTjGMN0Fl5Ogarm/MwAblingDVaSz\n3CK4VoB4Mkn4RusfCwJ1UKW6v93Rq13QAqPGM8MWydQxci2Znn9BhereNvb2\nrnjbGbh1rDY6vnctsId/UVVfYrIl1y8x3Ird0LXr/oblIAMy2o7hAQRjNNO7\na0mLcD7xxP1zeKWFpHPvlPkqToI76vOjscgq6h82b/kKTUuWoWiprMQO1Dqc\nG41/HdrJAl/ImfCLu3LlcZlNEhjhr3NflGgMpm3B8cysKfo4+ZWlKIwrKq4W\nRSuyEqiROgi1w4p2FZS9NNzlKG70Ho3oi/Hl/6jaA6HRrqtAN2R5El8kvVWz\nBrIYzcKV8WAw/KePvXgIMPxUBNYHh61iyTfd8wJfUOsQ9YTyAgfmJsfanT5S\nH7leVqqzC8lIg6DA+VAW4X9LiHd0AHonQeLU1y928XK8fG2zJXxsug5aua0B\nO+kn\r\n=f3Bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkY1Ey2Se2r9rJDvz7ujvtYEfDoyTEFymacqXYGtUHMwIhAI+suDLsib61xmFegsgLKJ9XN42w8Kj8QtBdkO96deyW"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.06998a3e.0_1600799160905_0.014570736270803408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.3484a90d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","@material/mwc-tab-indicator":"0.19.0-canary.3484a90d.0","@material/tab":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.3484a90d.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7iqQNN7Ja8aGG2W9GcWuYHNRNkHhJ6+TSWgD4sXjs8AmDi7qZJnHEL1vHLTh55vp6rxEoguG2hu4iCl6lSrknA==","shasum":"bd4b861f8293dc4c599d9b571dd683e329ee1636","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTnCRA9TVsSAnZWagAAECgP/A/unn5qJnj2BECyrHXa\nNe621yPM240yOA4Fx23N+J4+3DUFt5WPculqgdzJAuq8IKgm9pGSlQ1fo9nx\nqgA3BK3yZ5FmUdmH1gcNlie/itE76HbLDe28LMGQzktTfUh7gX6WUIz2R68Z\nGrMx472CgfT3r+zqvNU27NQhgD18v3X/7tvWWh3aDk570SGe+I3Sz6WbKs1A\nDUrbAH4Dl7q+uw5QxnIX/YwgBDBvldvs8GNLwLVqUygD0Hi/e7wO0LkNuNZj\n3rjpj4yxZo/Wa/zywIcAYaaGRgb2MdiEpaX1HMScFJS+76UCRCgvohAWaPjG\newJYTMYGaDge165cdNbNhrUvGubN32V/nZGZ4rIOQFkB2Izwu/DnDiB3Evaf\nhgmPR0x+y44MUVuTzE497tjY5bxYqp4LNXNBC45aU0HOcKdgAT3fpG0wMpH9\nYJdgA8UYqqRE5fQjl1giQIVJccoXihI2HXyTUzcwudJ7M5WWvb2po2oCi27t\naMytZ25ORnvjEe0wr5CVnl9f6GzqntffNpfrWPvdSJNWHU/Z2PCyoO6C2CyC\nr1UBaqnfXWQOrWLDIz++GCuphKGMypw1XdxYQcjXCWElx8YFCeI0hmtMferc\n0yH4nqO2G26OCWrtWTjH2q+7W82QwWXJVlkPeAngSp5ui0fo1qloLR2KO6mC\n99Ok\r\n=SmUF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcNvqJSgzySI2+W+8iXEa3GOkxMfmrrnXz+vtMK9fKfwIgCO83NZSzN1pZauUbtBI87T1FuuK40cBoJlRnZ6kCWNU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.3484a90d.0_1600812263511_0.9757372271838329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.3f99af40.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","@material/mwc-tab-indicator":"0.19.0-canary.3f99af40.0","@material/tab":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.3f99af40.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ksRwZps9pAyUZro1lZ7lPyfMQ1mnIF3mGu6MBoI/MVG7Li392rLHuaowmJMRMiFTwO/38aiodtbbA206t8/HtQ==","shasum":"02cce036c11dca4d64dc4ad249573839b10392f9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoKCRA9TVsSAnZWagAAzlYP/2KljsTysvV5dfRVWWw6\nwpbV4uK6+18qw+eGg9xLLnDbpagI8QHIqmLxVGvSDVCbEmaWsO3fjv50UtJQ\ni2cB1Tp9htmzwa4romJndGqnY/Oqz2XgBR3fs0ZHn20bAyaG2U8/lXKZrFLg\nrxZQ2nbVT5zD+9ecr4K8UAc6ZmHkH7y4I16KIhs5UcLv05Jsk1x6MnjLHChD\nkXL5dQ46VZKm7kkS40MzHWJi88iGT7RBEqYOY3cOD7GlQBIcO7j5XZElkS3T\nk3ssSndLSIJBHZI6m0TJxoSP9PYaqeRK2l9+jBTO7mfI1yUY2kC58yj1dskZ\nf1y3CU0wLElnC7MfB1APqQHJUHInRZyT2mzttIMSwI+OP9bOKNLBluQcLIdm\nA6r4JNPobgM+h79h96vOok6zr1BxtbgIG3bomKBud0kYr1b37ClamEVh8v/M\nek/YTjMNrd2KwOheuCfWnedZbDZ+nFR2Rn7FLaIck7BD9o3+pmZ33Ha8IQ3z\nmog1kq/pT/4jm0wE6/oHnY5hjBO7iG6UPQMt4VYO1QsTDn/qbSoPRyzaCPKq\nW7acZ1H3TD/u5uFR7cZqbybD4bFuuyageyiPH0v8JK4nrkH4DzAhXUE8qY5t\nT7Z/lyoxD5CIlOKv6ofUevj4Pef9p1xc7nZqCIMgVC35GqIMBw3CGNfxRADx\njmKD\r\n=yoK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWvggieL7nDluLxiKiw/46aJlKw22KUFaPJfzapwyG8AiEAslHy70NQQgsmaxP4katIfc36nL1Vub9ohbUWKx14zkk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.3f99af40.0_1600989705586_0.5582392873486499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.72aa1129.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","@material/mwc-tab-indicator":"0.19.0-canary.72aa1129.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.72aa1129.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Cd9Qe7swssy7RobBdwe3Ad/69j96aev3L9G4VjEIvLGEt7TRR5lzB+BdgZKCPS7CUowTWHtCaf66K9dB547Rrg==","shasum":"647e6b35fb84f0bee0d222a61abd354c241edbe0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwcCRA9TVsSAnZWagAAVYwP/jA23MGkBRMRajwubOEt\nm1NTn7lC8d9aaUsdUivi4NUqojMbgx+2367BOG3wW92/uvsUh28CDVgqRMHt\noZCGXH/LZu7cd8eB+suWcsT45xLVqQSwTIji9yxb2FDrse3lmo9WcWegWrS2\nlssiZ6cVGTnUJP3MVEa/pUf+RGliON25529epxEqqYduJVvbVUFoXFnvj5T5\nzIYsp/T3bQHFcgKCX/geWnkBAc2G7OX+wdhLBpQKLFKu/gsAJWjOgki0wlzs\ntbrqMnlcFdr2PRCuavUIsUNI6UJ/AqWV8y+fSQzXYeqOeDpD31HGDGyyIc8+\nlqrNsLJe+xrfHcoiHB+ruJE8t/5E8eLCYXrNV5F8VQjW1B2Iu1wWW48LnX2X\nOFmylSNG4xo2BxTM3mC3DYFJTMYqMz1e6o8yn62Z50G6ESMtAEpLyqDVlvAJ\nKX0+rC3hsYHd02tMRjLwq6y4lqFwISwBSKmef96Ym+XQatDVuxZY35d2Yvfx\nxcwHkmORkJtIORHT5ZdGHal7vNjo3jYY0K4BeezqegjEDm6jRWjm/MCE4IHS\nj4oFn5qhJPw807FCKAosqa4/oTCBf6DWLh0f3qORoe6N3g2ADNhQPU5ywkoF\n3wMEYqU8QvmGcxDZt8tA/X52xw7eMZ2YmbN71JLhFSMJugSp5KzsGupqcBxh\n+DGP\r\n=m1aV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuE5wig5lXhBS7hb387DmlPgaiVS1rtxLGMSvGFQSGZAiB9P8YFVTofTqex5DrrmJ3JdMBRU0e0GAo6RmRIz06TrA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.72aa1129.0_1601068059766_0.25683277905265167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.394fd3f6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","@material/mwc-tab-indicator":"0.19.0-canary.394fd3f6.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.394fd3f6.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3pab1mqv+BSH4olzRDsHTGvz8VCrf+8/6cawFF7QV2tV84GqYXZUgOXoQPLjNWRdnfzX+23FjzOJZJPeK8JGYQ==","shasum":"baf0ad9bf836aa2971a06f9877580600234fa24a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9gCRA9TVsSAnZWagAAe9sP/ifJ4WC5Ob2q1JNDnf4+\nB0DEbCSzM+o9R3XGXzmwGIFbbSC0b4JYzsiOQQ//mM+xsLecz1oqvevOcTOC\nazFORmhCvcSTysCAU1b68mJLAaB0lRCP5o9nuR9j9mWmIci8sm7I4kqmVmcs\nU0v75gGBFiVrkp8PhD40nVZIbdbhfvBuBEMnfk1ZrmYRou+OOc7JsoKiuzwO\nDt2qMkXdZOoPT6BaGhLf07QbdsK+1W79E102VBq+eWfL8uUqTv/3rG/hmWlc\nOPaFgRpbq3WmNELUyqdH3H/rrFVektyJPldl6+y0TKNgLR6jk8Weja9Vk0Gd\nsm9bCTpIb872ICWtOBdwpjfNCR0SoqV2F2Yl4jznaBt7BSbWpVTSiQC+b8wG\n95QN0Mn3S2GM8VbKZS9PjG3Ss4l4JCJipzvU6XcVUU8gaLBFQ99mLg4XIEcH\nTy6+ydBXAeHMn/FmTcZcY6SETqMbLWI9QVnHKlCOYOeOhPktUZYUxKOXvkcy\nUx1ZTMilACf5tI2KpZCcnoIkaKbOf6XTM2AS+AiF5So3PF9cd8LrQ3vPZJxB\nYfOfXL9L0xhv/ZOMOyNdMZQPMa7EpZdMR+7XvChY3yN3wJkBZYz+lJ9BAxUi\nFYRii61cSRVMllv+P4odmeLVxGzedHEcBb0x0qs51EmNjIAICkX5u2FIlP0A\ncY3V\r\n=GkOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbCJc6UUaQgx551idlmjb8EkoMQVZzS1ZZ4sMBY7Y6AwIgM0eCpLtjMTS4EMVuYwW+Agiym4iUzb+/QHWXZxlSsnQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.394fd3f6.0_1601302367493_0.2886264432456527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.347110f1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","@material/mwc-tab-indicator":"0.19.0-canary.347110f1.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.347110f1.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-PnF05vH5yG8Xfc9S/GpqmfeoDZu3kx3Tzl+1Dbb5IDTQEYExtdkjzcMevg9aGRuOb43iCqwBAOYmAKxEtfYwVw==","shasum":"89c22c8edc0f6a3824e046fd35073d040c9ecce1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRgCRA9TVsSAnZWagAA+bMP/iVjrNWsBxsm3Uud3hBP\n7Sufmy+4b8AD7qotun7xte2FVvpLHTwLZV0VNhNXoBxWHpUGpFObrOok8tON\n7Q8bu727dndaK6RVsTV6GHQtWMY0gBdKUOUw9Z9fMNlOrQDexUtHbn5k4xI8\nXD/zr3GlXnhDOVuuLJpNE07l09MGsmAOC9iZVjHR8r/rbaJX8pwlU/U3YusE\nvvfVWZolqyHvc1qzVHa0ww0TivJMsq7o3M6uoJs8CNY4DRC+9VbKmyo/lDmo\napI3DjuiVnDBtHDt49/gWERfZD2q+Fmjoke8WC2+1B0z2IjYzGz427Oz0Vlt\nsJaeValRIw76ilVHdO/jbrNK5w2ES+sMERDZnfL41hK/YkAQXVLagmtymHYQ\nvvL/vltgpXcx9wWQWYjua5aCdtB5D3HEmYTWhOtIlRwX6Ct7NWX0tRIuceZ3\n86HDLKZVfjUtjfHbIufySVgyub0l+F2maUQ+FEIbDmB7i6pDo0Oc++qfyt/t\n+0x21sGg3BL8csQOpvM1L+O8rCYEoOpERF8nAomHGnBP/dUwevORqGqvMeuD\n+exmsE7mF3hAdjpnpKx7cL1L0LZnqhRoikg74o7NcU7SrewtnM0dgzwNQa4f\nTBhF1THD9q9nC6h7qKnQYF7O+bEDrgP1aHuXgpXMW7SzK7Xq/7F+wN7GhvRl\n94Um\r\n=HAJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeBESADg0YYc80LGJSDAlYyLgIM4c/Z4MevvovLuPVtwIgRJ2UBawdd5a0BKgAmfRB4XM2F7NDf+F5xzsP77D4WIc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.347110f1.0_1601311840280_0.7549456432087158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.5e330bb9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","@material/mwc-tab-indicator":"0.19.0-canary.5e330bb9.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.5e330bb9.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-quu1+ppY5R4l6yWIs2NWR3zg+kIm5jihg4aeDtCsOvcmmlDlzpTr8gJ43GyqO90P/DnW+Qbqxk1F1UdkKoRiOQ==","shasum":"a2514647ca86661a2da8856bb5b937bd0f53602c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQA7CRA9TVsSAnZWagAAu9IP/j9hJCTz2zA6Om9ZC/NF\n0OJDarAxvzvCsM4n79RLszyUQlRJfsWpvSTkgIW5rjh27OXd7ihS+9O8OcRe\n/E1cTKrdrWcBIxl/vP4fjkm3kLJwBtxRTMDd28UK83xB9KI38FTbnGWtOHiA\n/2RjG1bOnMv2iiNNd2Q/vPo2NBSJPhJ6Qyb256C+lR2jhJ7EVTvLYb6dqtEb\n1EoxL0JhqwIKluUTgS4uutKV+wBC3pjvcgjp8/qKGDN0jXmXbkC9FYs0EE4v\nzS9i3YHe3yz1LumImQotieS4BOAFvuifM0WQ+ss6a9bN7GF+hD6rmBLnXEkH\nJR0kZAZq3tw+sOYBonb1BIHC5f1ED/JKak/BMUnJ+x5KrzHdF7Wm2RlCihyO\nX8uaspeZUoVeQOoouptoQvfD63c/2+UZ9iiPvKY03iM+aAM/jKQVAIG50qy4\nG/6s/0pgC+9oabSM0dqRu8QhP6BfwbAGqbbA9WNT2B3wgQZX5DjmLBUYItnW\nL1c/8TWsoWr/pmhWHEoAzJfk/PF/0gCtlq7jXp4SKYbdBugiWGBNKbi+hbi7\nz9a6gAEGJrQFr09powBhqARvs+oy15L1jlMGule8lL7UVXZVlZXCrDsTD5Zd\naH/NBi9+3GFdE3OdT/P3QOrfVxhJz9sWrO3G7NTeWiNnwc7M+ac4UideTrom\nCerr\r\n=IolR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7gfEZ4GCX2zuJJAAwsXxbNlKfml1/Kp++in5JWshrvAiBvuostldCg6Gl9XGRKObl8yGuhxLQUSPKVs5VoWqC22w=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.5e330bb9.0_1601503290697_0.4416023552919992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","@material/mwc-tab-indicator":"0.19.0-canary.30b9e3a9.0","@material/tab":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.30b9e3a9.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-M+7CHFDwkyphTHdBA0ZfF+uXx/eoHbFw7/kzXEZgJEHPV+47rVJMAslRMv4LCYt3qHGs4LYl05e/y0TAhm1cJg==","shasum":"413e6d529b15918c426e61ac7dd42367e5a04b38","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjkCRA9TVsSAnZWagAAhNYQAIcjblG2CBmES/Zr50e/\nN13ndIivbiJeOL5fICQ6Jalt9WgDsBrISHBkiKW7YK4VL6fsOsGA8gRKmIMz\n+hK4AaUzrfAtOirxhyfih4K6SBsMKuQ9nQIxb9jeACA0UIwH4XL2MnjsN+ZH\nHX7NXmt9X7ej8UeaFYE55DVCgzyLN+I9US9WwEx4H6OwG/A+Kx1AsTDquh5F\n3TPUHjnonEA+noxw2a3p8xgXWuYq2TvKTd/5Qb30INKzAGh1vudhAEUNYmO8\nZYsMVTS13LihgWqAAO4AYt+FDEWBg/I1pTI3qTEq9HG5JSE+JFanCmyog7vU\nw2LfIcn6SgaypSG+Ku+TOSpsClu7Rpk5Njm5X59j8POBQu1EiTQrn0GCX9Nw\nV4HrWcWthViRZCk31XRsLBDEw4koox9YbkRlEO/gXhflLUv5hiViycI/DPV2\nICssKszeLqjI4FEgoUKcskU68K+JMVsRRJIQQKHNGKzjnrpidJYiyt9OBsgq\noiknT+axnQmzUFFhIewfE441E+8bYKU7BSDHFhlfDEovisFF9EQi9aY35dGM\n7fCzLE6MFoWpXRcX4nv+4g6aIHgOOHuTMtuIsZSqEUMNI/2ynSA1+LCDGuxV\nvKZ8wdDFtXjby4C3kmuDGiojnWl03pG5c1l0Gm2TOR9UpOxyOVP9Di4AT1nZ\nd0S2\r\n=ljBS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANW/j0rJN4Y27OK8uivqliTY4/A9NcSZYX1L8am2icjAiEAn9zxFsW7u5/cuIvgzSySaVr0q6OGvQyWKZWLWli/9MI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.30b9e3a9.0_1601505507714_0.678420422036208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","@material/mwc-tab-indicator":"0.19.0-canary.7bb04b9a.0","@material/tab":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.7bb04b9a.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6/RCmqervfja+dStn1Hdz/6zzTqxitX23MU5dZ34csbwYlPlOQbARqQ8cXuZhmnzs1HMbcNJxtpd62u7P7YDkg==","shasum":"a411827cb3e95b305efc4b7303967c3792169b65","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":56903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTrCRA9TVsSAnZWagAAXpkP/RjxOHDk1er0TxnKeubp\n09kujOV7pnihlJgaK7NlzO/U62+X3PXB4aRFTVs32OlouhZkGv3o+NvOvI9Q\nSSS5qGfX3CJuheAfisIUqFJLduqzEU4v7/4IkNnwM0x2KDX79XddMfqro/A9\n7rFSronIFlqyf+9GO+R1ukuafLK5/bdK0a7mg7CKgXGziylbvFk0JKrt6mLe\n2QF1940m+98z3jfh0On377zq8YuJ+jISXRxTNchTqj5Tzlxy5sn4Ayj9F/Si\nerypCAqtepDVfc2J2RYy6heOj6K0JK5dWMezZ+wbXSzeiWjf5JB+LbpVtVHw\n3O3LCsWc9HfsVLipTVoNiBqPfdkqeorc/XVI10FCrI+s3V6WV9pyX0j0zp2/\n9ji/RlRzWi7S3mgD6unydJjqPrK4V2BPZHGLOx14OtJ8neNo7s+5RJcbdXJ3\neTkH+yW+hKyDBkSCp7lNbq7kBSfNrjxnYOqmcYAU7sLFKiEgcBVFVdMGAXqz\nUy7tUKrBgJpYvM2/Q81PY7z0crpVr2F/waTS6Xn5os5CCHvzqjkPviuWYQTk\n9npdlzjs9XNxpUrGItjauGaVMHwOjKpQ4nzxDghvgRLvj9VxmUqNCg/B6VVz\n1RRt+s6JvzxKJdlQIPq7A86VcJul7AT6/s4VtnM9ATL2wSaprz9+LVnQTjIU\ngB1N\r\n=FTIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDndsnWKX+wCZjwgkfEc+MicZcPDg2gEMt/6dBCCJI97AIhAKRgc4FoxzMAG8xtB6O7ZsPHeN2NT2ePANQNSdFpXcgP"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.7bb04b9a.0_1601594603354_0.75487012059768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.615d861d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","@material/mwc-tab-indicator":"0.19.0-canary.615d861d.0","@material/tab":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.615d861d.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vnypXVvFelOvVdndxb8T/yN3KyT57Gy9CyddxvXA2TNTcFU4ZTHP+d/ZADS0O1iPgH7XNiy2Bq/4ksREL7KDnQ==","shasum":"e96c05239c0f80dfbaeaf5befc231c30c27b6315","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoN2CRA9TVsSAnZWagAAixsP/R42GM12YAtsRXJdKKNh\n2wst5H63riSX+0THop9HTi/Kf5VyexcJasaiQG+6MtqSaesn1SH3T/oCra2N\nLunIsQnarJ6/P52Qq71cHtc7IJbJLE/VYpQ9g5PHZX+DjZa9WxZSwNNH5NiS\n9fweeH2BOg/50tyVY54z25ZzmwayGigsBXPPm7FEq4dk+KpYY5PQym17DZai\ntOnSy32TgoswpAh4upZPZjwoowDPRmfJ/dXLgnxD6qnmInVfJa0KoZMYo5cA\nVEUd0JC7tXEHyJE4Dtcz0IajCQOeDQv7beU0l668tquYD4Qes2biH6bt3JaD\n1m5LiNxnz04n68ECjsMWe9aNP3ox16xGC20Ogw3bjRv4VRSQ+DK84j5HOMlZ\nFWWEo2xz6AEe9Sm0MtZ4EUIA2Vn7pTc3Bc8r8g2szdbhU3am035Q1XD3ypRj\n+azSyFaFKEk3IO/c7joCS6FpOjzY4XhXDyeor1qM9b93QoaSPQiEGwiLIqO6\nJ5cteya5SWb3pPGJ6GIi0CnZnF5Q5836GlL8YAJ94wOjKbJW/R/3sSdV58T2\ns2CWKZ1s90ec+6mYcnKRe7pf4IzB5Z50UguyGYR/s5PkygJpqGCvK2sUGUiD\noSCQ6HTG00qKW2/nnVO5LSJhOdcJPTY6zKUJ4ZcG2MNlwqySbSDmslULip6V\nBEE9\r\n=YKxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnrB1GCk/7FxszfoHogHPeLk5UvS1fW1zsKSlTglKwqAiEA+T17xACdJO9wRQohaGmzb3OD/tY+czf04kId+OVmzZk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.615d861d.0_1601602421774_0.11822937431199487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.af110e86.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","@material/mwc-tab-indicator":"0.19.0-canary.af110e86.0","@material/tab":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.af110e86.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Mm+1Jl6dDY/b0hCy3bcROJs9yN8Yhz94e6JRRLV24FLBYtqSn5enaRxY3MnZqq0PaZHvhxTPwXe3LfbUzNpC5w==","shasum":"034f419f117136a170bc938f99f5ee39a0274a4d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7y0CRA9TVsSAnZWagAA+lAQAJmdt5KdB40MGCVPf+ic\n7mchTdCZfCSwczC01q3r8Gd2ETC4rOFrcui9x4vugeRHdrKE6+Dg/bbgTTF6\nvARvGehCjmPwu97Ik/9x7aruS5dX3FHwzU88hm+GL08bj/OpZSCrFk2GlwKu\n9rCdKSYDfX7FEeKqqEC4APVerBibj6SuxskKkvxCCbnIbKJVmQ2Z+AlCCo8K\n2OTiB6yPwu8UD0dpW/Nja/uMNj7fDz9fAHpemwvxp7UMe9zegHymOwmcRPAa\nCsBNQ44dhGXnHEbF3ziWeEgDWJ4Klnp6qhzqOD5epbkgSVC/4LwXiupY4APn\nL43X7v7jUgwNEisB0RbOOYPfgp9IKJEG81+ifJrEOLkBq6CcwrSl0bj2UbIR\nfkwLqY8b4GAn+meFMzaEfxdG6F1d27I5mk5aRQ7kF2oOh3bCDEAN4SBeYoa8\nUjPZgyPH1o6d4VbSlFrwplhw0+Il6MoWbvjtt6rhuoEFZLj7Fksgft+q1BGd\nXERr8Os613ULRdahXTGRL+JiQPhLoF2RUVGyCgM2LoxbUe83JE7GsUXEW1ck\nKjAmZkmYGS4ABN9vPD4+6GB/Io70onTg+RgGerpWc6oUaAH/64YzaKxLByUg\nCXPKo2HhsqDiugGqFa2uNqd3eQcugDxcoDfZ3kGlXkXznd6/1/ZDTvsqAasx\nbn3V\r\n=usN4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBLS3L2mFb9GY6Lff039YzSWeCd2xvfWR23aQVbWua4QIgUS46mRLh8GughEkteO01hhg95pvWztzkzBVJOkXOmtk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.af110e86.0_1601682611855_0.7206234892922563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.89d27ca5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","@material/mwc-tab-indicator":"0.19.0-canary.89d27ca5.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.89d27ca5.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MZwSze03Rg1GdPIBng16tyJH2OuFmkQKQ4wscawMTXuchGhFCmq4C7vxubzyZXeigZ8PCvvKxcFzYs0Ba175dA==","shasum":"a84f85feae033b1ed46cf53f397eb4e731f72e04","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8f6CRA9TVsSAnZWagAAgdUP+gN3SK3ReVtdpyAiIdJl\nNnfH/gMgBnOUg3lgb2w1iQuxf3WC/2cBx4ix0QtjmO1WabwW/l0UGZB/VP9u\nid9+TSbAeEQf/Cai9BWK5FltVSmwv0d3T2OdElUyXLvohoMYJz2NqiXcBhMT\nsq51HiUnu5d/M6rl+C1AJ12osWWCPedwa+gJeWfKxS6ibKcyd3oQqmmjLSkp\nUdPyVvVF1hN6UkfS7NjHKQuxl8V0dN2zU3cxeULvnOAlu1MdoUuftNclECX2\n6JLowaX9bD+Sr/hmQ88twMSmoz53IZhZmQEaOWuIqMc50JnngVDBKehBhhFs\nqdftQxyeqFbYdKOJqzn+QfRYeNtjRrpmdzN1ItKTGvFgvGzDPBZFQ3f+QFHb\nnJltHey3aOBcDqv5Xjehm4HYnmg+WrUbG0x0ykpE5Ch5u/rW2yds3K5mVJCu\nwQp1Unt5V32rB0Ecpg8j5FuSkvyuFYUaA2iGvap0AxsdsLBt5TIqZoLXmsR5\nZf6s6/KhJ9qCAlPshDQ3EV3flSMT8XDEyKN1kjGMuwlfV7QrgBwAZHp7AcZZ\nlrYeJrRVFN9MOWG60PtJvmNXXOU08ZPin4aZah3jLwnN3lwtXl3xrTbxBqM3\nn2uuNg262UHv2i9j+abJUJJgESyJJ/W32I20XdaVzpFPO3y8nlwh9PyBJBTC\nkfXC\r\n=h9Tx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFD+Dn1fyo47RHs59EqLSznXVi7Yl7ALWx0XSmvfG/4IAiEAmBXES9rNXFCnb0tl0AqOu+wwj/A5apzi1qeV9x+d7UM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.89d27ca5.0_1601947642458_0.6385392614744498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","@material/mwc-tab-indicator":"0.19.0-canary.9ef2e7c2.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.9ef2e7c2.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/dMs9UlW8bZfD6UDaB0FvuQEYJ5AhlnEhjn+7U5c5FkoJNKYuCoUpyakkaRhWEbO1IzkIFHkIievWHQeuuoPoA==","shasum":"4becec63b9c0dae0945e7c15d66fea3500a0042d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhuCRA9TVsSAnZWagAAxBsQAJd3QBPxiVR6q7ij+nn4\nUiZoFA1U0d/xtWiNy/DM/WfR0mpiq7ZrFSky+In54F4rSUtomFiRMY6/8tQB\nfkyYXHMHmVOkgA2seqrwxk72yFhb7fpYbASGjATRFOJtTb7ceGlAqogvVoZk\n8iXk+mRg7/lZ028vujGmKLyQOYYSXa3YSMLAiavDc28ZraEz6pt2oVr4xyPk\npyNsVaUEFkHhI5O8PclSDDK3rYFgoyBIBTirdfWpHpLKfIVJU/EaD1MVGhIU\nwraEwV6oKHUjv74fY7U6lZJvNJ+tyPl44a1RCfMTJAnhrk0turEq/fBCVPfA\nnvd/Znv/uZk8an6z0KoQITH21mbv1uKqE8hXaMmHxCW/z+6eN+q4uWKOPk8R\naMHmySWCtSV972dZ3bKJE568hmJhsenB+/gVLmKID2v3ErHTxT0578wnx77U\nTPmlu307wAh1bJ2Kj1BW1cN9PsMzNaMfWtJ/d/cXWrRRikSYNXoVGPX7GdWb\nYqEQzoeWhcCRoHUR7epK6de140jdlGnRa20EpHb2InHj3BHKlx2szGm95rwO\nNBy11dKmav1junEGPIaxEKBCe4UDSYC5EvOltdf0Dc8ZUF4XAm+f/M5F5rC2\nDGp23CmZeu/5JW0lXVQIDHClTIJ5TUopxfTF/1HgB+6FfVlL6ZhehXMHyTh7\n2VEx\r\n=GiqK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA8tMiZ8WeUM3/ictCTjOKk+ZcUJM17o3XUjOEIJaW28AiAOPgmBsX0PRaATXoX3/kF9zkZnhNaxo4EwX7SHv56EeQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.9ef2e7c2.0_1602029678381_0.6439453230313916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-tab","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","@material/mwc-tab-indicator":"0.19.0-canary.96c8bdc1.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.19.0-canary.96c8bdc1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+dfr+udl53+mkLi73BJqez73Ufd7V41ewlBTfV61smfqmSGa8p2zr0eaA0OrxpJkrm0RS5XSJ2VibjHxb47cqQ==","shasum":"60582c8eabf65df5c0e533fd56de713579195b09","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAhCRA9TVsSAnZWagAAjycQAJG3uwg/9v+p77qvlpyW\nEN8RO5KiKsB7Kz+QX/dsqtCxIfG/DKd3+6oYZPPB8ZYUuc8usZ+IfPSRqe22\nd4U5U3+pqpu0pG4qvANp2mZIohqtZfYLWpoXn7ZHMM2waZUQEijMRVMPK9Pd\nH/ZDJ7TpipcXr5WqtOlXQkly8xm8qzw0is2BMboFKmDZnS+7d/UY+pPDDLPx\nO7lLLveUEXpxr8Wdts9vB5kQUlLKJrEI5YcgDWyVW3GDEsbd4So8MkFFYQKE\nU2z9JW+Ftm6GN+XsJYi5pSAMD88Fw7MP2shWlVetoN/31u/n6vjl+0BEQ6hP\nh5VxAUxYun5Qz9rpQqwnbjPJiVi0i6FA33P8HhcOceduFpmBvYFefRHOEzq2\ngwNp9grHuoxefvk70MYK4uRDyL4mS9+dJjRJOWw+hoVyQDHIyrFgUXvOXiVG\nU5v7ncxSWge/HEmGRYDBWDCZrv8ZPDg30o1OdGUz6/Xf/KGGSXtMYX2de3CU\n1eV6wV+SsvTKyRtTnAnYFKOBm/XNs/8nFw1Tr8U2/sXWZ3V4ZYqsQYodIrCp\nzpF6Kw0UM6wPimEatLT3A6y8zyMBaweVN7RECm3N2qvfzTlcAVQGukZVpEtt\nyVvZZ3Wp3XjQv+fdPdvLdxjBqnsS3D7hRokCLQPF1rcUBY5d2LKGExuAy8Lo\nwr+Y\r\n=H4po\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHV2rnJ4a0R4hKcqNnmyyjCRTATgIJopSpq3ktU0p54AiA8Du+0XLHGEpei+Pv3hSeLoAfYc+CWslXT/2FuE3nmxg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0-canary.96c8bdc1.0_1602101281031_0.8242548424446037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.6c21f034.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","@material/mwc-tab-indicator":"0.20.0-canary.6c21f034.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.6c21f034.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-IzP+oU3M6To8NV45+5yBgZFUKqBj/zJnr2AYHG8J4fK2pRjYBG/DKA9c/160PpOMOIAwaYTHkE7e/rv3DD3P2g==","shasum":"e87f4cf126a7014202bf050fcf9701208d23d6fc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGWCRA9TVsSAnZWagAAB6sP+wZ7KaTp/04JKIzTDHm7\nC/dvDpR/sqrjWFvrf9VgsD9frTKjldKJl+eqUq2XK0hmBZPoFgOFn/2ywXLq\nqjFBFUR5EexKw9MdcH3CQRfjLKr9qrQ1P5I7PSEXXWVqEvAOe1IFYfYcfg+R\nQ3Uzhb/IWsIImclRJ5jqzI0Ygz97tbtktf+ITgSmV2uyAhDz5gSCOJkRwZmI\nKL5UA7RtQ+Q8ARnMeWqxGn1pCICJKEIvTNA3hA+OVQD6qGC7H0CR9HJVzAEA\n7YHwxGZIZJDPI+YNsUh5mghinOX5cGcFkYWJlmg5z/q9tVv/tjLX9EorSXJv\n1/OFzTpu5SF0YdypWCDBI/BfBGJOZjHYtRML4yzIDA5KmtF0fxtsSCjabfPZ\nJgjoZ62DVRCFUOFYkKeFh69sNmuMnxrWMWfvacimWuTSK4cas3tTJmm5PJ6l\nyDa4uBDqg+2CqOgSNJy+tM+x8vgaEz80/aaxA2ODRXRjCuBNhw/K38/KWWop\n4wjQSCBEE+gVd41P63xiePNX/0tLACOyflsPX8JoDMQJXpKhQP70k8ramepf\nG3G1Wz8Kme/rBPC2TVBfMyifapFE/myiMB1+382403t+FfAfi7tvHEOZ76mm\n3bzITZ5LSTTVgvQBbxmgs176DD/TBgDb+m1Vd6t0pjZTp81l1AmeS8g6Q9aP\nso8w\r\n=ls/F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEiJ+2srQWfM6PIJcXcI7I5ntUQf+qqbW6j+MrKJmVU7AiBS5h9snSo2aYcRSVYRtYbArFlPnQ04XtBEw9/MIq+SMQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.6c21f034.0_1602109845850_0.6698866119122593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-tab","version":"0.19.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/mwc-ripple":"^0.19.0","@material/mwc-tab-indicator":"^0.19.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.19.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-GcrD/Nyye090H88NQ9gHbRn7QpdVUwCc0R+61JiQUOqjFVVUzMwsx3mHDH70kgEWbAUv3M0adaCdmAFDM1uOoQ==","shasum":"8915f57dc42f5d1c1e712f1dedd1e0f4aec9c193","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.0.tgz","fileCount":13,"unpackedSize":56956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkI5CRA9TVsSAnZWagAAyuAP/iCFSugVuOqJMACBwWh+\n7WorbHyzp+A6WyxjK9ZuFqmrfLCR5lOxC5X5vdAnccYgm55ovR9b9fAjn2Im\n9tQprWMZs/ncQQn1vjV/P+IEjD9UeB4PlIi9GTTXmMMWjatZaefmNs6MSJtc\nTSdB2NbhfJtGvXhT9dn+OyoPHygzg/CZTf+4+M2dhugDqUGPU2hF8DPyPTHM\nUyhzrw0pBVjCpTzRdMkL3qpCNg2sRHNXoYhuA58qyuHC6ixvvYWf7b85GhMW\nyrXN8IJlhUR+tOY4y54QqVz4g9H8+BC8BNtSKQuYBpapKBvxJkMnd6B7IhJa\nzAVSngQqV7H220GO4MwsO2SJA3w7FXO6q2rbJkoThvGN6FUAnr6Tq27IPILB\n26n7XqAyAZyr6zlOo25I/j/nDjzCLfIBJB6GKK64maRO1krJ3+X4sqGa3vl/\nJ7Yh8/HWaJZa9D9e8v4gYRbuomfJi+2L0Wdjc9Jjk3YMBQfjZMFT6fDjIS2a\nLxfAKXHvqW9xrY0u4WeUiWUkPK4eOtAYMKnFPoUKYqf1eIG5FeDO4voqxh7H\nMC7+0l2P77o84m27v1KmOdGqpg6VuY7QImmS6KdsgdKJmk4brI3KplKbrGZl\n3uWyDAztVLNdutfa1dH/jbHkCEtGQrtduKiTKFac86lmMaTp08S3MJzBSNX2\n/hkv\r\n=PsVW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2n8ReBZ88fnnjKUpltYUbWddePCSWZc5x7XD+qtjXIQIgPxDOmkcfsj5d51McJI5MRY3rDhrumhDlsBRDhhga3O8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.0_1602110009449_0.7895251069789229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.1f026aaa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","@material/mwc-tab-indicator":"0.20.0-canary.1f026aaa.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.1f026aaa.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4+qklqVo1XPRhiRKoM8rI5EmiCifCTQvv6M+n7lp3Yom9hBDt8sPD40N8P1KZGcbp26LgVctoFjxbhY31DHSdA==","shasum":"ab9c6e72a0342a0f43b20a78c4172a049886cf86","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iFCRA9TVsSAnZWagAA49sP/2PmISG6Rm1kISRw92gg\niOYXjlMZ9GYOUBBZSKV4xUvyHoOI4RnKh++/HFUb8eKcoQyP3jcoRBXaVnvI\ntZfBlvZ4Qxynnzx5Bof+4zVvpx7yrfY0kc8muhUR2sSetS+svTEr2fhduVrD\n8IbGr79KQYrHFkuQuwBUmIxxUbENFHcOgDFat4Myq4WHkVI+j6Agw7jdsgOA\nlhWRlXeRRUViQHjNvqT7UGuWPJUNhR2fS1/51OGyExtQSqu5/WjSXBFliav1\nNE2TEJ0g8/3b3mg7P3o8k2rJwPOXD73uZjMyPvFAGkCYHiPMQWpKs2JTv5WA\ncXuEbubyWtFX+hSnn9llJXkLXKlRSWujZejh4ml99RgOzRLxgJKuPBYN+kYP\nwIpzO8iZja+uwJS9nwHREuh5JGNkvmA8ABRLyVG8gioCSLqCNFDPel4kCfMF\n1uZFgZmPIYpSSRWD2g5Nvzc1AwQ14NxpgmsL6GOyWpziLSAbm7zvn50APN21\nzCAMTL+52gO/w5N8LiW+VgdMYNRG9/gY7+aP5l731zgoe/U9+vGuwnfeiP79\nySiQUiRFqJkD35dAohA/6AEOJbMls6JRzpNK3wwbwmdpF1Hr40ffNrqdk+lj\nXizpvPGz6igOJnPEsy159RUZn3u0rjZOlDG8b8FWsk3cuDvwErPxs9yIPz9e\nN7uy\r\n=A7Ji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvNWw3KbNSwsAEAMa6btVLp+C/oZVzJJLLAY2BBhg2gAiEAlua3K8onPSHEGNjiXh1f49Nz28Q80NzpGk0jZB/L9Ts="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.1f026aaa.0_1602197637506_0.19504873555013003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-tab","version":"0.19.1","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/mwc-ripple":"^0.19.1","@material/mwc-tab-indicator":"^0.19.1","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"^0.19.1","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Weh5luFgWWftLJvEcH0P1sDJGIKeqnc6Y1rFRcf5tZJujT28hiV4Qc8YLKopU8D7mhJxNwGIGQ+lFdi9OlfHEg==","shasum":"974bf92211493304c9c28a88c5e24e9d7a005464","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.19.1.tgz","fileCount":13,"unpackedSize":56956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5taCRA9TVsSAnZWagAAHJcP/1MxauQy5/h9PPuolvYc\nj94G097lslslzNphvlcAJ7VJDkwbphIadV/qA4OjURzs5X32JkfzOmhfauJZ\ncVvLqyHPiig0cKAG8rW7XKfkc7Ebby5eog9gNM8xkn8WhY5xR2USXh3nFcK6\nlmREHJd9Hrid+phN9huY9z4b3Pc4g87IblQ+lqw1lKE0LyrDTsZdBdsw20Cg\nfMyetpmDeUyPssdSkVH05i0iUPK8nO8aQu9zZzHiKUfdmfqmEIcYwVJzVO7+\nFGQBQTieN1ddmQiAyHc6w1aWkU5z96zIlrX5mjjvVBBBRFgOnKPhdrDKuYgn\n1w6xcMu4wh5zaatjWKQh9vAvttqtwyFSvquY4FfC8sA70x9VqwyRyN6lxEIn\ng21TOx/COyuY0AUkNjSkAWLDmJ36uYhla+hhQ+XLtuMjuZjNyp+L1IdL1kRn\nR5m71Vc0NP9aS6dqrAK4PpE/zOO+YOBn4fe5F79LV7r02ycEFHyVzYIy6GYl\nYdSaRoIhbD8I9p5Uke/nGqc/rhEM5K9zixr+oadufWbU2O00ZG9OetTzjJNi\nwGWIb1RkDmO4QTOMdZsWGDRX8seH+yazk9BZW/LyY2x8SMVpejZAV/wdd/hM\nPt0nhYOiztZ1PKma3lJ/mdJAhillDQbXQ8eALaYKVG8/BmOUcrnlz1hakOZK\nNiOO\r\n=g7v+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCutxXeB/US/AcI7oh8kgt7XJKKopN2eBsL7dTellnybwIgHwOY8GVlxcPNPHMS4lixhn5D83hOFwj3V/E3G9O8elc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.19.1_1602198361769_0.5640945075396258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.5f6894b1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","@material/mwc-tab-indicator":"0.20.0-canary.5f6894b1.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.5f6894b1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-weMsjSkCAHzJFI2HaY+wLKP5W1qi8aimfENsn9u2zHrmy84KFDQSuJLhj0hF4dlnenNUAbooo7OYqQvc86ejgw==","shasum":"7746e297b8357bacd74e4088e90eea2ee6a293a2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uxCRA9TVsSAnZWagAAdiEP/jO3uvx/2SKfhrcsJ6dA\n3/9G8+2/IjRoFQdOTESQe4M4fuCQlLzo6RV+og30TiXPJNbxoFfwNtCNWAi+\n4mK0ogvO8mXg5M4pdAv0n1J7GJc869wM/7u9KyMdcOpkQbccAzMM4LNjdSNc\nwYh36gEURZjTnDTOBWk4XdoPQ9KHbkGJCjonzPNknIiWYVPqHgR/P249PZqS\neClNoD9zYn7vVojEqTNWTH9sLu353y8bBkd/yiNWGBhEb5J6BDbufkzjfO1w\nJSiAqpJ1A5xseyRznfKXjIMrYxYD8ItZ+YXHcR+xoG1jf41oCMhMNNhVb9rY\nG3QPZ2r6y6caaJIJ+6zjBrTgss27D6273jzS4H5V7hD1oSFuMjLl19jSsg/n\nlpfTIo3Dex9O2nHs8VlDZ/USpdlmISIhUA81ly0adgGk7a+DQU5OK9T/iOf7\nC7u/kmzT81BF2x0n/T9CGt7zPS5O4QJT5uTWNbpg94NFz+vPHdtxStKOK5eS\nMP29VIaZf6rmVmAv+bEn6sVTFYgZOIW0iyQyuGL1ifDqaNwKmgd/5K04zqUU\n/Fhe+0SMbsJYT7/0B77yfZ1LocjIqwOibbu2QEygqnjYNziX90kymucwoRNr\nWkZwsE1R97Z2APt6C1jSTIVUPrriDX+xqc/JAXIN9u3rJrpqos4vAhjflFJn\nIikf\r\n=U8/9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZEVR4566LrU9Pxqj8MitNNqz2mkHWNS9wK4tT+RAycwIhAIDzKeA5Q63xBAuNNnn8LkyOdbYnvtZ/qqZ/Sms9BNNO"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.5f6894b1.0_1602198448971_0.9527575273984312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.f6260d06.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","@material/mwc-tab-indicator":"0.20.0-canary.f6260d06.0","@material/tab":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.f6260d06.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-xbgLbuIQTNqzve/mOkqGHfctzLP9pyr03ynvxLZ2hYKn5saPHyfAZTZWJwx9XHiT4V0fisDnBWO2tStdk06X7w==","shasum":"7b74b65a70ae6ddd75152594cfd58888d9616268","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNn6CRA9TVsSAnZWagAAP+0P/3Pk6ZUX/Pr4hcqAvX2S\nwOLbJnth4iGzlyqpE6RHWjrJCzN5ID/N3cBhn4+t45ASdDyWkN8BUaCmKr4u\n/U5h8Ie9JhM8/oLtZprbakX1MsHEDB/PLTutAZwSpJTHHwWEU3IIxmJpdUSh\nh67YEe8La3vxwhZzHWnjLSO9BPNjTE2OnxFGxMoY807kMek9GGZzDRK0vJZ2\nV1/cDDBDr883XFV7WXh0d4lkW7yY34t5gEYBu6bxobRWDiaPNEqK0PNRBCZc\nsUlb95feMwFT/U8FYsqzn9cXFwSfIva739iB3ZN1j54QFu5iGPytaHne/zhq\nEsuL54tOD/7t1nyIEhwDV4s0wyNra/2/sbRe+BuL0wZ4gE4wmz+u8shjs9uK\nCLK7xSX6PYfztoiJuXnbxEXHfInsJynm+2zei3YomL352dsqyzpKZGuS2RSF\nq/ZPDFl0NG4Jnj+sYt18SAtuWGrw25J3KlUvokivHB6P5n49BtSWoDl68+4d\nHyDCjVB3cLrXt4Pu3x7drFTaO91RM16r9HSmeTY1F/kpS2g61Bf4zCpun2b0\nvgcWoBgsaAdD2VQBUu2eWYCL5ROmUFnHyiIQHSiUMSpf+oXnzPGyICbd7rvj\nZvCzN+u3Z8hb8DJ5GMI8BZdhmDNGMW0crgR72C7kRTRfPgPHBLUe6a7ioF/b\nZXv9\r\n=GOmx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADZ3EhFN3t8NaLRsgZ6Se06prYRSlU41kFhH/s0ORQ6AiBq0vqPw6XFgfD/M+NtYWBi21vqgq+j0AUD0byIPqklfw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.f6260d06.0_1602542074318_0.6336327958247137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","@material/mwc-tab-indicator":"0.20.0-canary.2d1b08aa.0","@material/tab":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.2d1b08aa.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mastT9GmShP4M5CnBL7kpv/nS7ejSZo+BoDgVdzJrSmQhd7IyPQDygiJHdIaki0EEhq89xgzGQfDzhrcO873YA==","shasum":"209d8624935c1bd7d93092d2e0884470c24f8ba4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf54CRA9TVsSAnZWagAAMgwQAJJ1y3ULsmOiraCD2v+M\nYFiUM/7lUdQnnlzbPeH4FuUuUNVoV68fujwFkok90taGSelPUueSV8HYtJho\nzhbalv6n8+aR5gQgO0wzG5aBCblEZ8dN7y8PkKJ/fGaD1obMyjUbKpo8nrwn\n1Sh863euZyiqU+5ODHmPj6vLHOmqT9XonD9zqqTnASZTF9FMPHwowUPn24UV\nPWNRjrG/4Xpv/e8F9ufKVLM1sueZ5ULuctwQqc92ypvTuFQOFM8OV/wfmELX\nqhUqhOpduhGPnyFLHFZadroA1p+amgEHR7XnsL5bKmbjMokWaIuCQCGq4T/c\nY6hmbSmz8OcpNJW8QqBFxFguWUAw8+O2FFpKjS8mpEW2wWQZ+DiOapGoWjt7\n2ZKObLqUCkFNJijExwlBPvHrz925fvafnUO6JLDa1B5V9kX8AYl15Fi2PWVj\nf8ykSwmJs0HQVz+gG5Yl0CcqQj0ZJJV5rdtz1nqqLp/t95Rby0TA63Erwmsq\nWUipiXWlyTxuyMGYFYEiBG6upPo+C1TzQi3iuuJG8HjeLOGzntaCic4W1RHK\nbxQtI3bRHcLk3+yNyEEtZ+DdTYcqCdWc9KfaRZ6ghF9CryBqkrquBwP5xW2n\nmRwqGkVr7EIMmFf9o7d4arSXa7TqCP6sk3Uq+DbdmwEB69JdPhYdcCOvEEZh\njl8/\r\n=tw/6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsBTW3FXTFROFJXYNFWFjotTk6/0l1sPwvEpmjTjuQ2AIgEjB3rTw2nf9SbX0yFoizpcoejoakvOgnhV8wmkHYQZ4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.2d1b08aa.0_1602616951618_0.9785171765656755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.5bd58844.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","@material/mwc-tab-indicator":"0.20.0-canary.5bd58844.0","@material/tab":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.5bd58844.0","@material/ripple":"=8.0.0-canary.790ca85fd.0","@material/rtl":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-59lFvejn18oDQBAr2PYjpl2dzn2ctAasJbTh86E2o/Pxphcr1vLvHHpa2+/VoU8RsFfnUyX5WI4MfQxQUUUdWQ==","shasum":"05d98c6137c1d15f8176efe0ba38353b8be40e8d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxbCRA9TVsSAnZWagAArdgP/2WZrbjf2GrPky1amANl\naiefJrp2k2ytItXIJEFwIJrcEFuVLVpCA53FRoCc64DMwQPDXIPg0wieqE68\nkQ67z4JVXHn7L3YyR0wEWTGkxolA5V9eyjgVdttWfOHLCvjlGijR8VRM75Ov\nkXqtb4C+ckzm+QoVcmcqVi7S6GgoAwr6OC9YqJFxsTYrxLiivFANwzAbaSzS\nhml06m0BRAIBoZ2iczJ0V5kEG8UbemBpq83x0LUxadkPHrwkc8EKacxP9TGB\nsuNAVH4VwaY8AQJFne1ntK5H2YVnAaEA+HpuYrXkZznbINBXBd5FShzqjELL\nq/09pFmPiE9ROXRWI4aszMAlyo/A28a3EUofTRpSvJTwmavrwArxaQZxBObo\nYxVYwguoDo75CZPOES4RD66oT6p4TvAoz76ptKmVi+jgqj0vqaosqxDLkaV8\nFXnAjwwRCQGr9YwgdZX//7HoRg4DyW3464uqYBaefvKhrlPMbt46xHFndP4w\n5U7yZAEeg6cxi+A5yUlH9zfbGXs+ou/LCBcOkUHd4d8HMJ2o0WZNVDNXAX8F\ndBqM0y3LnzvPHO9mjB2QUQfUGlD6T4JMFOFlHhdrKnlCv2ydrf60RO8cs+0U\ng8lV/Xuic+FUJntn75HE/kJ11Xwco2RkYXCTXwUlTPyZvaF0gkGqfWDF+WME\nNxwi\r\n=fDjA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSpyDgJmreeResQZyB/bRuqwOELkruV0mAIspAd7OVfgIgL/zOHyPemcidXynhKhwUPNc8CgexmXKUhgp8Z2k49HU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.5bd58844.0_1602632795257_0.4957073755769834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.bc846b29.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","@material/mwc-tab-indicator":"0.20.0-canary.bc846b29.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.bc846b29.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/3Yvp6jyTczEhTgLR8rKyYAujWxsZzNpyVf6Mr7gvf9B3opgAWr1fffLrmEMXILgT1sXyMYDT9PEXS5GF+jlNA==","shasum":"478da026df2869f079f17e24fbbd8df81059956b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BnCRA9TVsSAnZWagAAlRoP/1X5+pzEL0+xFK4FBCc5\n+4Km6HqUM3WqewyU3G53nHWP3QR2/HWSbZ4yZGxyR24EfQvTYMvd6rGvz0Pi\nMOWsdqBBcnCkm/zTtezt/TauA6WT+CLQu0h5+vhr5c17OHJkQLDbvRWVpj3J\n93GP81pmYoJsVgPrbKsyK/B+x5uiEwlCpIDT1pjtfIkLC11qIyhqLKHZHE/I\nPz6h4JY13x3qEwSv7045Zf6N7uuK51PwiaS5t0QKdl6V1rc/IeG2mmkK1T8/\n/jVKWn+OL5wd7GvYbJQEsJNKCGzIp9A1VTgjITRXgqtsy2fsW8QdGTUX7VZw\nlLx2JvMfH9K43iug0keuevOh+jChi0pNnz8MRkfx3/C5byaEz6UTwc5hMRRs\nkKbykKlyju03McLb2KzVwcl++Pnb8G0t5Lotb8td1458HEgYWGgmCgLR6Qz9\nn54A0eoDOqsV5sfXcudajNAHJ8lAWkvEXr0CKsDZ7oU334pd0x88Evl5l0bl\nfRm+lP1nuonfqFRIyDfULX1SkNJeFz4y8xf2pqksd73j+QfaX5noFrznElXa\n98jkeb2vX6maQALj0N/UQnJTGtUIogccl3eC8mDPHavTVprT72jl37ehiDhf\nzWpXGcrNsWrQMh/6z1XYRe7q8L45QkXUCFkEWKb9yhoryL6HfWPCwobsOYWY\nxYk4\r\n=sSyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL2Q6AT7xPZd+FcjJZQVDYcmyogK45DIjvZikRL2alzgIgYZaLuXV9XkAE8HyyrylR4EmewF3SD0O3i+s2nQkjsBw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.bc846b29.0_1602699366815_0.7185902411530904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.3280b686.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","@material/mwc-tab-indicator":"0.20.0-canary.3280b686.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.3280b686.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-edmHxbVxzQnKXBryu7f3g6QKC5fhckvAkOpzBzBggqudjWWyQX2SnMtr1WiZ9ZMWJtB/RwcbbtZ9wy9nV5wd1g==","shasum":"8ee6f555931525e079bde6de3e1dd6ae9edf66c7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOfCRA9TVsSAnZWagAAVxEP/3PLmeyZBoYN//xlA2I5\ngY3laNd1+ToXTynVGJhyTVbH36BJ3GayP+Xw8G/oWKkavRF446F6TNUiB6gx\ngHxRLeYMR2siFGHUPAwr+Js9E5zSOjozOdRFye4TXLjOir22ZxSkvO2PsVyy\nuCeQJTqYiwk1MKOvoJFQu5VmGK0lgMdb8U8tiffVWOqJv0e4qn35um743Ee+\nEWNhDhITreXYHtt/s/4uDj5cUxi1cxhMinL+jA+s5QgPHykir+DWfwYrqO/p\nScojpjwDhnkofGx7lC5WB8FzrPaUbm847HqFbH/NCl+Dc46wRUVsqvgzx3n5\nspJhMHDRkBwpvJBm8mDKJL63ZPgLY8mb6IvfCbG+3l8eUORRaa1TW5kIb8t6\n4Edf9fHC5lEJryYeHPaR5TQJCfIS9vB5Oq9+BF+5ngGgv4FvQkhtcueqlFBb\nml+Ecg8GAkXcxkce5JQ0AwCg8w18B8l01oVVYSjwfb+bYb1kFMdsEofVKfBh\nn6LsBZD8nRUqsHYC0LBgI2rPylDgaiQBYKm+NKOnGdKsXS6RCyxbW78MeV3i\nCHZshiE5KNs8KFL/1T/lImdt+E9itJHyCflMKFK1rIkjWVkhIj/sKMQpLTRq\n1jP5T2g/nUJ4nJ8ZUSN5k6HWJbZQ80OOZlrCUU+bXc2Qgb22wUsrxgO+Mjvm\nNKOf\r\n=j/gs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYD3a1F+VdUDn7qBEISVZ2jClNUhlKdPsZxzN6z1f+UAiEAzFid6raoSkciLB8RjLu0RaR0cGQBMXldzR07UW9witk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.3280b686.0_1602806686874_0.031189463757918867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.9e94cd38.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","@material/mwc-tab-indicator":"0.20.0-canary.9e94cd38.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.9e94cd38.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cgkmZ7UcHwhHMbDsrW2lxb7TqvLlwhynja+IEGwyCkSBtFS/4kVx7LxzXmjrQIEsZhGNVDmXTMQwBtlQdpeTMA==","shasum":"95e31a189272ea1bde412c48c6a5fb054ed1d315","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1FCRA9TVsSAnZWagAAl/EQAJV08Cjr1g4lf3DZf1La\nuYi6WGG244v9rdqadbYtao6vcg7AdQS70Prbji7VD+UEYaxkM5I6hPIUItCs\nNp1bJO7+YMDgO77GCFHtVjX7OM0QbExUlVCyI4596WxXT4r0Yx+fxboP8QtG\nHVreF/x3qPRzA6WC2PuKKwAyaIIrg2ujGCjHmu0TvODmH1tAsoCrN8YQ8mps\nDAK7mwP602+HyHjzhsXcH0vYNX3WDen52vxo9SNx4JTyDTBH/wzna+VCQSRv\n8OSG+e7Redbkq0uJcd9aM+DA837x+6h/3sqddpwCshAvW8KT4uKRU/nv52nI\nz7StXJ3kfMtNK+FRIMGyM54EkWkmXC9lSRnVbdh9rVrVPCufeJiQm80NYx8u\nXY47Blf3ZAiq3eeG430O5EkqUah0IFaStK75a9nJgl39xUu/aIzMTD/VkdbP\nO0HKtxl1h5b1eBXDD98cDPLncfqMnHF2IFLpWCdrMexRVVf9RAwpFIdB2vb1\nBHVAFGQKAnkEdy2wz9F3AnYfzLKexzhkmQ8mltI+yJ41HzbweKniCxkFP6U0\nXtAdfCXRAkP/ix5RZtZ4UVVabVTXwkgii71pePPlEXICLEd8psObUhN2zIkC\nY1UAHrseJe+N4Q/+j5zHuRga2NvbNndpC28vcJCliouWcfuNLQOOLPMIMkuZ\n9P6T\r\n=1XWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICu8EuyjHrm0lWgNy5uDxEGTqExjf7I3TCGm5GXogJBAAiEAiQL6360YEB4tSC3xxxXp0jwBs+9O5kKW4SwcJKEMNSY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.9e94cd38.0_1602882884754_0.10271257004175527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.4773c773.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","@material/mwc-tab-indicator":"0.20.0-canary.4773c773.0","@material/tab":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.4773c773.0","@material/ripple":"=8.0.0-canary.2ab716cbd.0","@material/rtl":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NuHZphBJgmWHI7FPwUG+/uFeZMQM4dKf5m77c68tCRtLjNI0cwJbYjjtIk5/s9jJGcZigbPak3oj4JgYU+4DFQ==","shasum":"7857c9e108141255433c7ad31e1aa7984de92629","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/3CRA9TVsSAnZWagAA5WMQAJlq/P04CcfY1/GXRsfA\nyjgv1k6P2Ws4/PB/woR6YJuBWyuICjt94QfjBMv1ZT+dT/uxk0Fy7Elsle/e\njqxmjkc0FfFveD+I6HM0TWDL77qsBsRp27vVdqADA5/IGEDeo/zeZCJchO2X\nkeZDlMHc7w6L+6QPvqyylQnx810GigX+3Y5YIEA+nmvENs9PaPZGnAO9ka+/\nQT2CFMof+EBOlIbaSSQkUzYg0slzg5tHH7ltsSeJstu6BrijZKqW6Xz3z+Mv\nb/ETxDWu3HYVl2LLSFrQLO44AwA6B4DBkaAuXoKagVVXLdR22dRUD0DCWmK2\nh//BmNwmU1MMw21f9+Ij1kZagESpMcazBPj4Ex6wXeF+LJ5VpPazFouoDrIM\n6v3V0fIw3VJNhM7ZLFS60YuhbfVkl4f6YOi7/A6XTmKduwETYKypruZoRyDj\nP+MFekaICYAjol915yjXiMhf4v1/tD1Y30gY8vbCmKxlyaGL2HljFxR7BDLi\nE26vIb8bylIRSJ+O0HEEXEca8ymCC8bqaBW+6zdrcbaLL7VbezQj5/6eiTuO\nxug4l+RaWsT3nNp5kWNItomihHyNCXvPD6+KhoVENDV6gI/EV1i14uopMIIf\nQm1VgU1pi6eiIGcM6eie2n4E0O4sRHFe78FM6nc9tyBzjPLXCoO9cZrJ47iS\n8DpY\r\n=lyFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb99zRgXGQQAaWJ8z/dGfUI3/04YnOZBSBlgfZk0za1AiEArFdvCVEesoG6vwkRxZh7IdxRO/aOuhEgh8ImagEcva0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.4773c773.0_1602887670333_0.6335850588301133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.65787913.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","@material/mwc-tab-indicator":"0.20.0-canary.65787913.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.65787913.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CYOnjGWiy8DfPvahNwN5N+2d/kxVyiepfcbf/ydc8ghOrUJ5BPHCHGEaC49DJTf0E1SNh1CFW6IurRKX7nFkPw==","shasum":"2765ecea2633c61809614216b3a95a7d5e66ff92","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAnCRA9TVsSAnZWagAAD0UP/RPGgwb1Lu4XprfsRURu\nh7GxiBuuj8iDMpRACA3TyKYDUA5PHM5vnthmEW9gaGSHckTp+byLrZw/+yjx\nCyHmV871OFq1n6aypmsu8HlzZRARc0qq36eFX8dKwy/VX5lYBImWnQOCEIQ1\neJP/zfIiW8oj+QB5uOm3Mf65Tliqo5RuS/tLGbNdtflRmdhSobWUTwweNoT9\nCNlpf7mtbhvJNAhMPoDELcNYV67rGhpVuxCN5DvnqRjbP35Q90eugXgA/BpZ\ngFIBnJEEOkyEcBujnzgp7PZyimyvO9uS4f2ZNyABQUldXyHxrBVIeCKOEYPf\nZRY1iP/ubAoFI27PHGID8elys+eoqYJ3fec2ZqAfvISLnktCz+BmJVH68+XX\n7L00+i1Nuo/OuC60kP45zru6rXGOpLPuU0PH2ED/4mzG9Xx2i+00eYkQ/GNs\nYfSA1gKZU0e4nhKq0Ov9Vx6zZwPod1i+fRkUvdB7lnX2o7nvPaZEHjGTIbv3\n1jXSbA5bCL1nvHxRoXNPksSijX2Ows8DuiFYYg0RDjCEqiPOvhuzDJT+TySK\n0aJIWgYEIImDvAVFnI1cnUpnpQYIN7Jmz3ZV4bs9zit8R6EGMEe7tBTH40Nl\nCWb28g1piSTXqr8N796T5zpVlHigePoaWJTCJZZZFvFmLJFTYkhJvkW6HKWd\nkmhw\r\n=J4jB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcr4hku1NKzY8JZCxmF9irEEVug4YJwQ3/9RxUK3/56AiA9m0+V6RrAO/XrcWGwvM9VSv2TLPSAtJOSha+ZZeNe8Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.65787913.0_1603133478516_0.7639472200437771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.5485fba3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","@material/mwc-tab-indicator":"0.20.0-canary.5485fba3.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.5485fba3.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-aVYUMH/roBxVKimhPslWNlFjkbrrqg7ubkWN9/8KBuD4o1oCq81d0gEvpjJEyCeYjsxcul67y1kI7tC7KS/iFg==","shasum":"307ed1e9f077e7d4d3a20650fc3def8aa18f32a6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQRCRA9TVsSAnZWagAAyewP+wQzz1pkp3btTEPFM8IO\nHwCqUMi5mztqYZfmkFUtYw9TTYdnf1gESYVBu2YBE9aoznVX91y5kGN2DI3Z\nhhKLolZnY1D33+AlBq3eZXKQ9PBewMK2mtAueBEtMlTNPzcHCiwbTJOBPIe8\nhqGWMyUIb8IYqyhSu6crHbi9r1RIQYBbdqvfZJTaCe7bZlX+F0020dbB4iui\nVKhEF6x8uPwpOAswEFxw3g2WKbO2+OdRtC6KTqAZoolPzW3lowII9YS64weh\nIuJes31UMa6MiQDZ3mSNC8mRMoG0fs4GOiIcbLTT41xp/SObMsLHjTdY1ocR\n/lVpRUyrBvjo33RR0QYJPRd1D3Bm3Uzo5cN9BYzu4a9EertAP5xlUEutWzNn\nYfD/dUT70UfuoVq2O/0I9OOIAVM4wov5J8T4VJ7QdR4MJLoPsqeiseVwCI1x\nai9wq1oXGFUSY+I/IeqvByMHW5TCd/6qE8gmQMad24Jjf9z+5/iNqBgv7IdS\nbF9MjRtknbb+7FsadBzCtjV2k4dcndYsgH3ALQbJwMp6mHdbyG+pz4hjqiLO\n3XT0/wud8TRJpeA3x1O3yDpy8tFHr0w98Am6XBLPhWMHKiuY+xAoMTYvG1hC\nq7Z8HtH5w40GSNuZZAzZMcFQbePGYg0FOjYEuxANhWi2ZERIqp2ix2SDjafc\nq1+f\r\n=w8eL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFth4Abn/52uBj+ZxJO+WQFNQ32zrd2LIZGViyfH2TjXAiEA+fmY2hdcEBqKea56XX+GLsj2Ka8xfOInt9NC7QTgGPc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.5485fba3.0_1603142673383_0.01470014423927668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.a39d0a92.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","@material/mwc-tab-indicator":"0.20.0-canary.a39d0a92.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.a39d0a92.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NKYUGDkJGQVgHC5tC80o4fxoAFg+57S/S5hc3GD/0SEYXyJSOy/vylBcs3LeYI5Hj7dCphbRG6LP63XJiRpdqA==","shasum":"b6140de071550dd6654ce809393b02192f6f2ade","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0n5CRA9TVsSAnZWagAAZ0sP/RD5Owt030nOvRUFKLbQ\n4V/EG/O+Q2/dTLEMDvbvAnwnEC4LvVF0ATaTugm7jGAtZ0sAyk1hTF/x0IoO\nVquOEdTIOh42OHYUJExtLjycecopVLQ4yjo1XklaZ2rDSKBqPL1E4eiQ8zhq\nM/RfHbgrnkSy2yB0/b2QWGlZ1FVHDsaYgaV2BZTWZytO7yXuMjGymXouVZC9\nowxJRSxn8Ltg+Rk1NACd8U8KKpPkk0u0AMoJzdb/L4hcNeGklqWm0kCK/vNf\nbP6YLgJ3J7IiC98w1pi+3VBDvd1bBQw3bpkvjLFKVZiWNnbzvm664oXD7Vod\nTzcuADoIRZh474HnUO4LZ9l9FaZBZ0rsV/w6xDwzEpOBkDi8LGSOtrLYDnCY\nEwbthgCPDqIhzJn9UlBVzhtOejnwvDxOfvht0vi3Hd3Yn/gBnZnZ5DsRZ3hD\nRqMZ0H/K5LpY6kxHBNBhSDb7NhHr80cU2mOS29bAiNWEAne/YLcMmQWHhBRB\n9JpblIBcY6Ibk3iZoTi9KZi1lya9bLrRmp4/AGDTH/bZBuwWeKccrXe+JRM2\nVyGDLFg2dJ8gqxabQZU3CIsULP5ATGt1pL8rgxEY4CVu0B/eiz8jq71RG4US\nj37xfpSuT8kryyDCJgSLKfrVk5nISF8+ASAj45t+Xn4JO1Ahs5bOSiGgHwjO\n0IGC\r\n=UnUd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6RV/qiNTwH+WL0wkN4Ouioaq/YUJTSMfPeWOWVq1HRAiEA9eGhxnbwV8O9dro+3SegOPg9h9GFMcqDV6nfIpzljXo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.a39d0a92.0_1603488249396_0.8075683454980473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","@material/mwc-tab-indicator":"0.20.0-canary.4eafcbc1.0","@material/tab":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.4eafcbc1.0","@material/ripple":"=8.0.0-canary.ccc64eea3.0","@material/rtl":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qlPdt9AAdxLcTxQS14RaiVuMTDiVu/jk5aZrx6L961OHGW/d+Ktk2Dv05+D1MofGc/mjiePtpCn//d1tz/pj0A==","shasum":"55bbd35612a9c8b080319db12c2a6aa65f7eb944","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YPCRA9TVsSAnZWagAAl/cQAIy171U9bp2hsQXF+XQz\npasVKQTuYV5rb4nztTPd5PDgptscHh1BStwlpJyr8RWBMxSAgNo/xrjeNVXx\ny2ZIUS7tGKBsKIGIzi4azJfbOaZVMu31CJgEh1nd0RltDvrg/sqm9OSnCytu\nJN0lr33l0cuK1Yg61l0OllsI0FS56KDh6vB6KY0Y7/5cXP710X7JY5Tm+b0z\nG5o1F6JiM7gAzFaDA6a3aiij/xxW/LaBbhvkUNtSHufpEt4bdifWOzyUdUUB\nWZ/kbmJY3I0zLdk3RhOvAU973mrZq8IEGvxZX4L/Qm+voUu/dXkyj4ZL0GiU\na+y6wdiTrMqGCCkoNwPwsLUM+ywbWpSYaiYGQZtZ2akOhaKioUfsa0O8VuhE\nv1qxQas5yLAiB78FAebBfnpQNV3JBr3gzDMeBNLQQkwSqZeGogezPz2ffpjm\n9c35TiTRCcWTexvJhBSm6UcaUFDhvXAqY9ES2lTuhrqd3LfILyfv29YP7aKK\niKgjrI/8pIM6t9pVwaAXMFBLhIJXGC+W8Rzyft4rocESM9VJ3qEl+EMQucCD\n8nmJFQqDf7WYW7cDQVi97Rljk5aRvUmHPahgkgpdPDMioYZpqPBX2FSbB/TO\n7C5ZqUhQSecvsTK3ytUkfu1AIZHYkzTfybsaHmIJtDd0hfqnZcS2Cz/oWA4O\nccVZ\r\n=zhmz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDSmC3Cck4QfPeAs1HdnRu62LBZssfYxIk/QVpxwOFMAiEAxc7xNHnk5Fc6irvzFtjBl1GKvjPRsmbDYcwDcB+TfMo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.4eafcbc1.0_1603761679051_0.3778770497927437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.32961593.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","@material/mwc-tab-indicator":"0.20.0-canary.32961593.0","@material/tab":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.32961593.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-41aTno+OMrChmH0GMkKh2UFa4jycTvY/+hDZOdlnGlRt+Yw9OxC2dSv/mEyeHtePs3trIwxku+ATOh6kSR9McQ==","shasum":"619df8a58bef06e909bc56e33ffa0ebb91a0b37a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3BCRA9TVsSAnZWagAAiFAP/24h/y1s6Uto2cyB3zES\nPMxZ9HMHSiRkZ8NBdRB5ylsMXLldGyaYqHn4404TWFvC0LFOSowPdKqyLqj+\nBf+f0+Es+2UftQWAXJQL0rmjO1iVOLuu8k1KQPutw5te9+pJipzpivYAu/gN\nJOWJ7VNOxo6vMg99UWCCl8AHCgRSCFOPceFSZpwIQm5WP0eHpWAAgAMW/hZa\nQh+W4BvczxmT+co0obj4/4O2nljBsfyUGXPxLgRXw4jfdAz6NgIFbNhGhYYx\nYPFM3NO3o/8JYm9Ja5pAIUhiZBsDHgm3e8qljP30whW/hbVZ30+hK3SPKKil\nkoIdE4zOpZW9yfZ2GzcEXGip4evyKP4RIbiyrIHM2xrBYBlIqterKp2OEhCn\nK2PtF7NV95e8Lo5kLET/cXdp22sGe2x3+uSXp3E3ZwT+KtvZJlVQOJD9+r7M\nYVd2WrBjUP/57/VFzmBw5tg5x6yJZwir9D2tkY3Yba5AvwJWmkuRJdL29ag6\ng4K/6CCmH2kMBGyeAvRvvCVNEHJJrhGm8iTKNDzxjREG0JhaRUYW2Yd4lT2k\n3+5OIZn6+bJGyQaCjsxfl67SvP6CtaMCfyuapm6DlRyogNmWjtJUZ11WWfKI\ntUfGrBA0eVstC954xGp9rXKHbJC4tFEQbK/YKU5613p2OcX410hlz1k4A5Io\ntbZr\r\n=DFvU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK10pw31DMBJjGAKtXjffwBQGeEWpp2QBKGJkq+Z06YAiBRAc/sL02khQzcdaW2sqFEAagQTfsCG3pXEPhD+I959w=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.32961593.0_1603845568785_0.5128516790078212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.8e3a0601.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","@material/mwc-tab-indicator":"0.20.0-canary.8e3a0601.0","@material/tab":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.8e3a0601.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-yIkiKEONmFytA9oCu8YsxPThtYoZx35GYFcPXEqifrWUEt86J5/U9fvkDERVFZt86LNJRSXwd+0wSf6EbUX1Sw==","shasum":"378cffa965f2570cd7ae9aa14c296f747e8f03e1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYMCRA9TVsSAnZWagAA2IgP/1rXEyO1iZac6VvGdr5M\nKpK2sCPtZJl0BUNZdKQn1M/gANNG4AZObLzfLwd+SeLmUqUQFUfIcv+LRy+y\nEnYcMoYXBfoFSm92bTJIqqULTtNk35UxiFTV54IqjpXBQie2QueSpSCrmims\ns5hX3sklozqFOaT5h5Vbu6JgHewaHgaojT/ljmL71IdtlwzGo+z2fWSRaJYJ\n9dcPSI/hl6R1dA4iJETll0pme5zEIipZkHf+xroc0LXoosg0SM0382yL569T\nLobSSd1coUPq0bozz+7RE+4leWX6C7ab88rtY++22zD8IrgRkE78hFRqXoGK\nZ92PKjj3LL3Oz/bYR3wCpA6WbWDmf1QM58vOfWxzkmQaEGjWnm5tEU7H9yla\nQTHEIoTAQ5iHyE6Ui/7DxO1lP6JQvG9X1zhJ0eZirm321eGbFRZyIn5a4sfi\nW9QIE/logyH+mcfKhvzw0sK1jyqUj5bLZXZaDPeLGukZVxbBzsGNtmD++Etn\neClc00jmt0GPUT9mhybN0wCsQ8/ifMgKtXrXFUFPTVn7BTwGN9XvRxT82tgM\n7dEIbT7TEtPEtAMWiDaKXzvAryYk5oFDoCYEW1N9hmUGT1O39fbzVKJC/xoO\njEocg1bp9fRJgzn7rPywMqMujZR9KA1bGdwIXmFBI0DP4crdJ20yUHFvxhSE\nd5jh\r\n=GKJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC78blxyF0CJ0n6bywZAqjEtUTYxa43aohOyQP9WKFYngIhAN/56+Fi2Wk7/665F1ixMr8s0i1guPB0pAhXmzRfhZYq"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.8e3a0601.0_1604007435456_0.8515525326156408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.178c25b4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","@material/mwc-tab-indicator":"0.20.0-canary.178c25b4.0","@material/tab":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.178c25b4.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ziw/nB9sIbWZvkPDKCNf0zRIEcKHGbhX/oIQ6Mbkes9ZbuF1nLMkpdZIm1A40PGzfJsliNN/JL75MNs6PMUmGA==","shasum":"94056bfedc75749219f3dc3f0ec1978a72905151","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzk/CRA9TVsSAnZWagAAzoMQAIl5dCIeAjEFZnWS/Gia\nyh74Emu2ZpQQdn6V4pKvPURRh0i19idP975daKPqMyaiWh1wiVT9JiKxem6X\n9kHX11FinNFr+oKqMnMTHZa8pPBdiqEQBBKPEi73zPJDLIKi+6H6aYAyo9En\nPOR6/gSVUbd/ZFvTavSkKg0XfQ6sAiVXoxEwyFCHm4/05rNqUBt2fYU/qWNm\nkNImT1Ma4iAGN9naapZzjo4eYYVZ1AWFwIzlxC1stP6yHbwCoc8IbYcspJip\njGLE/k89qRxqPN9bjpSVeMsgkA1o85FLlh62pBwsh6/amrI9BUFhV1iA8tm8\nOdjJbbxoUSrgtoiXzjWVo8rqfI9hxXde4SypRxvj8Ic122wi4ms4V2lvw/M7\n7kHXLnIVOAPbbktqoNl5ycGSXRSrylLlrL0yOYMdE0Aoodwcb+7Nwm6fWuMB\n56JeE9N/tkDZIUsCMRzJl1PxH+ECXUgFrotHTWgEII0BJZYkmLto7NOx7QlI\nRLSYBeIVxDkKBf12as/tPARqkar1O9gy6KkXp8LIbKE/LI6teUTtfP8kyV+d\n9YUd/XjRSbq33ND/RUvi171KzM5uyG8pGJWWaR49rWnrDePZXvOq4s1TAVef\nwj4oYzYzCGCxEWNZCeHal1SDmaP1wf7Ve199pU18TghOfQ6bVzWtKh0SqHje\nE7lc\r\n=1nKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLyLKMbgZxImGKqINKozL2Wp2YQIh5L8mflEN8CtvDnAIhANDt3AvzIvoVV24/ULsugGiEm++S81cOKxK0kc5iBUhs"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.178c25b4.0_1604008254777_0.3601842255317793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.124beb49.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","@material/mwc-tab-indicator":"0.20.0-canary.124beb49.0","@material/tab":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.124beb49.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ELW58UU0v7FLPHswGuU6CgKlTlS7jpaOEvVoDHUWP0cwoMb0h7hh7B57Rl6Vw1TZ/ClvSIob+QJk8nH6ncmDqA==","shasum":"b13264098f9a6cb8149f60265e90b7df8934bdf4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqcCRA9TVsSAnZWagAA7S8P/0aPkD1P/Z4BisPvr/Zu\nkMBYzOFhP+wYh5fDuk/D6kSz81LP0+OcEzTiRsS6+esesCZcEvSGSscIHqeq\nXCvPc05bQ3+9BPMAR7TMMP16pJXKRx5FHssD3Qledjsb/thn4bBcRURjS9/9\nm+98l0NC3LVE51Yg5UlARq5971kLsKm6LNrOq6rfkaBqcoZCJgTni3EyzwDk\nw2+YpNxv47N4xkjnM+M4Z9nRoIa7MBt8ntzMwYslDp68nn3+YC2+FgHAY22o\nyelhCY/LuqNfXLznO7Ki3kV5rzAlF6Imf0K7Z+jjfYfLlzHV7dy1Ps7V/J5H\n64882lJE95/8rQZngIWCFwcYOHYitwyagkqXzPI+ukSrdHq/JsPxuP77J6m0\nPqAf9uDtQGZqUNp8h+qraL7yQBWmFzviWg+4epSI9LO0VppoQnNBiQAm33Mh\nJrLc4H4d+GPRPKHIWyk6ibiNQjmd8Z1swivdIlXmpb1YzZ5qul7bHYPO+fWz\n0u2Kp7dnqQfa/RtqHgJCXhOTkdk4uBhWq8wEfBTkVdEXQSt4J4oJ/Eui/JP0\nCrUXhQPoEvoqwwDcjAuH3Jz1YReGDe4p92cT/uxjDh2SyAd8ql+2WvDaZGNl\nHGktRouk8T/94qu+c6j6vehevBSvsIoYGFVQoSSQEl1pgRoh52Ax/t0LDtrn\n0TeO\r\n=2fok\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkzS0hOG77bpELcwh35KopiUh3jvqqOfTZbD9K/Gbj+AIhAN3SY21gRcH9+wiOBJcL1dc02WVRRuaFM3at/cKSiHci"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-tab_0.20.0-canary.124beb49.0_1604102812344_0.9822384642807303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.5937f468.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","@material/mwc-tab-indicator":"0.20.0-canary.5937f468.0","@material/tab":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.5937f468.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-79qEWDJeCX9DANtKWzCHb2agM6KseaeStBH7Y7ApZzTAg/uDDptQf3SGh4abmVei5mkqTYgb4pCJ06IIOhUQvQ==","shasum":"e5abe2814e044ce6bf6ec3c7008199beff43728f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfGCRA9TVsSAnZWagAAhKQP/0Cv/bt2YWg9zTdLJXii\nF8SIleEnVV3Qki9NpZz0SRLiMU0kfBh8vHCW04TU+E3IPS2EHBuF1hZzhmWM\nQsuo6owYw3J2MsymHLXLQttk/wgvb1zS9wdxIRSE0aK0y+2sFGS5DVU+VH8/\n52nMM2Tqqtd1ftu1D7D5ELdjqTkUWg76aaFX9TOHAQSk0dp9oaaPOd/6Pf35\nFowigYKjj2dm98PI6upEcyygJtciFSQ+ZfGEbvouWZw+fadVrFxA4l/bNiV2\nTOGxj+aT6A1zQk01VNCV/o00KLyjcTq710hJlHXNR0Nt8jUesNxEVmk4G1VT\nb0Pg1LvkaYce7F0KFX5qSItIpI6huZI7X3AoD4cxfgN0fiT5RmQVuGvKZqcQ\nh3k/LCNMjTOSbhxagASNpxYETI1BLQRRRDweHYfSb0rqyahPyHHBvhXn62/G\nIV6zHFuak+Wcp1Szzer5ebuU0IKbIJXVgONbnGUZqLQmvx4FbxlTDRkBxbvn\nyf3i8aH7abLpUeVUDVBSFZEE8b75t7nqRQ5VDqxc4AsaVNdhOeKEEqrPLERm\np6lB44OQVpl722/uwNDjOwa8P0GoYyfvlyb/s1Dyo8DSRK3NGA/3hOnML9R0\nx+lZUM3lLupQmnlH3tSdAoyJC5rcQB0TALm/QZBNYnY+F0VPIFG2LgYawu3u\nTQje\r\n=1heF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8W4r/zxBrF6/e70rZuYv68OnQLoDSJ9cvDUKZTCTdGAiAiuYmKDuOkIwks/7lBILx0xLuEOtNR0esr6XC0OMxI9g=="}]},"_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-tab_0.20.0-canary.5937f468.0_1604523974221_0.3367945491718842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.a9bafaee.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","@material/mwc-tab-indicator":"0.20.0-canary.a9bafaee.0","@material/tab":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.a9bafaee.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jGCJbhZIhmlDewbf55zMI02TegW6Dz+PaCx0PDQd68sW+pS3fsyX1MxLRl+NFDTn8IvUZ4MmAZKMdtKajIE4uA==","shasum":"fe3a73cc73700df2a5ebebf533a4211152247d3a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":57042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0pCRA9TVsSAnZWagAAB9cP/ReO2r/6U4DjlHZRw745\n1zPuow0WBqW85xNJ1EURZadj04OJ2rn9ngFvBzQ/km/tcllTola0tWMR6YJ2\nQlss2X9rh1XWA9J5k+jsWA7Nw2PG4AaWr48G/F9lh+Ip0tN5zHT6oDwSRd+L\nz2bgD64qds2UW9QLZMgnBt+RHDC80tn/u+Iwu2u4qkXGcssDBQFCyCk56yvR\nLRsgpDFJezE/ixaNK32tKm5nyz0kd+2EFAsnl8b86MdpFKQeGE7w7T09jQa7\nJnIsT5sqToeixWo6OF+XywgbAOo5SHq3knfN7np4lvkUjYpdDjZtUTAymrj4\nP3h3q5cliWH1BpGyDy8ez9BPawT8C9ndKpf3S2gEz7GQ8wByJEwtmfAsaJ7j\nOZ2PmW3s1piO+N21+4+V4P7FTfrhGrm72PxrcB2VfXV0m62GCr2uFg9/nggb\nbqZ/WIkcTicIyrK3A0LDQcamR24Wv5XReQv0SM0bDC6DWpZH3ccH+eicXIcc\nhbiuXa9RUwXHGQfzxT7XvYgdjXoJC71w8wu9somkOVQrI4Hk+9Q8fP8+tWW1\n57OmzBXkNGFP9ixD+6afDU/6mcL9fi++ZpoztcLmLKuxld9C2UV8AFV3xJ0o\n4eTn6MyfjRON1iUZ8BjMzrmYHOE5FB8i7k+v18MZdbqiLKMJIC+EIKI8uaVc\nSCCG\r\n=OzMU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgl84BZrPSEkGO/cnSkfXN3ntXof2J4Eaq420Rnj7VaAiAsK8uJWz7X4B1IDGFO9YQ1T2JyXMRAoZZiBz8LKAucNA=="}]},"_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-tab_0.20.0-canary.a9bafaee.0_1604615464747_0.06119764246302983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.184861ee.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","@material/mwc-tab-indicator":"0.20.0-canary.184861ee.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.184861ee.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-K21aC1vk3gJHp+ZI5BBvSYv32LvU6hY7dSW5vuA4z9w8B3X735LMhZ0Sr4XBZUh4GQDhrlsH66v3HlP8L8LMsg==","shasum":"bb62bdf17804702dd213602c962e0faf9c1bea98","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":57758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexpCRA9TVsSAnZWagAAD/IP+wcIohtUMxAdayNbpgz9\nB0So4Q3C+iSdDQj7piroBtuxZ8rwYh4PuZTn5t7pQmbD/nzzaQ5LSqbo7zMV\n/Fx7elSpRiJyeHENXhtw2p9kUKPWgT8oZ6Ud0+4NfPdL0cTbXccLe6M4opoH\nStgoC2PY4rHAG3mk92tpEEWiWyRhjLAtwHzIh1/Opf9/IP0QPKQrIUPE9YdU\nnVqpnVbPOKmCyBrE1V7zajUsBMU6XWNNilfRHtRr5QhNYJyPPfkJRX/80qzL\n6z5g1bJFmgc0mJMRWQx0WZtQrOi3/XqaCbKvXR/5fJwxvqi25VwhduWCGAkd\nRE5bBzLmsvTB+M3bOcWOsw2H6VsxNHZsv0GVNLUEx3FtZF1V1vsOCIkS7d+y\nVFzrhSA7l1sTfX+XQG7aZXD1tp9CzpoUc7puEEMwLBrEr0BprlgnJ8E4MsMu\n5dlqqNS5RW21JftA4B/nN1G1HjekE00xfnEdIlPGyU76gMXPEDirKUruTCe0\nCuife0pxeNu4G9pNaF+7RGHAR924rYAenoxCmON215NCVETBibLYugXjqRL/\nrBY6bOIYWdS5qhymQejUZ2D2Fl9oWrQqEPxI5KDGYfzc1eruSXoM1i+9ViN0\n8Lb2e+yvTZG60PySeBlpPouu8P4vGp2pRWvf1pXd91n4N+qb3o6r7ERclvm2\n/X+X\r\n=VL3h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYi75VyS6D9kIRmPStz+FvXyc2etlRX1DEW8bxMO4F1QIhAL2m4P/0G6kaAM1M3KvMlIIUvRwL0+hTvYyQ8MQ0hR4r"}]},"_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-tab_0.20.0-canary.184861ee.0_1604709480533_0.18809363524035816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","@material/mwc-tab-indicator":"0.20.0-canary.6c6ae2d6.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.6c6ae2d6.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fLxOXkPoj09lKeN5KKnAL26KOXpnO2RebQahZrq3tMUxRW43BYnhxNlRzfB0hRQeV5VYW/wuiXeLThe24DecYg==","shasum":"8e5555a8cfbfeac6be3a57daa6d03eb9d2ea8ff6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":57758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7DCRA9TVsSAnZWagAAI/EP/A1j62+LH5G9kOF61b1+\n4vCt2Jcf8lwu9r3QTg0sH1C5xs4+Js4GekwedvlXpC6KY52opRvyHpmvf1s7\ncxUeuH2O+ooOEYp83wNDVpKCbPGXJpz3+bUSb9BiwQKj+jQzSvoO9r6xCulA\nF17ZLKjvv1XCV85T1VHGlIbOgge1k5TL1vBhe07mpRuACl+NLIp99Me4FnuN\n0uPFkTqKFkARMBfL1Lsyq24MDk6IfstXW5EGjuiybvnUdCb1+ndo9yEuEM5s\ndIZt2vkBhCiBIPIE+HNyRoloBwslR9GIatlubtJL4DcasptwW1z0OdSTnSGV\nbpDpj+KAW1BTIbY90zAm/s/cLRxpA5zFm0LM5oBNgrk1RsZUCGKLjo5iwqe+\nnz9mnma3i21mkCzrMnXAr+3XZE8XdJMI4eDTmx9Q5x9oVVAB/8EAEtFMBxjt\nDUAkoA8aZy4R++CbH9QFX8ww2lPY3iqbI1bL/AVpi8Q9jdigBSIw0WiZoJht\nNQLxgA/n7G3u7rzRL7KWks/+LfSOVHETy2PoQqiMjhjVRxfBEMjA2RbsHekL\nkpXS+QSkaQm93iPeQSIn06teRo1nSHefb6aQJfhOUZgtFqN3jMD9fvgLcIIA\nZy0eEIQM0Y/xIrOkubmsN3JrXK31iEfcCz+oongUacoF8siaDo45gjIf3CW3\nWuLz\r\n=Yt3I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSjaMtSNbudNOuoTtmDuMeQe4MipQUH04T1T4C+jUkAgIgRjPXd1OcBEceMFRjrjUE3sW5gDs9N7wy+o5tgXo6UNo="}]},"_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-tab_0.20.0-canary.6c6ae2d6.0_1604927171094_0.5427253360688407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.ea2aa477.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","@material/mwc-tab-indicator":"0.20.0-canary.ea2aa477.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.ea2aa477.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SUtKuogISkMnRVh7hZesexgdfr91wxKZJ7rUVXFiKFcwX8irtJDr2Q/uI1+bANJJs50a3/lq5fY4/EwJyxgg+Q==","shasum":"8b0bcd2d1edf3ec22ee262451433f40c658dbd1b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":57758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdebCRA9TVsSAnZWagAAdLYP/jKl22GftYv9LAXrNF9G\nfWHSg2iRy2pt8TLDawOzVGG6VzsVN+Jw7FNQ/mRjbjbqM4yMmAEAldFHvKco\n9KVt5fbYDI0e9nsyAvliEdfG4wqqaEMVMr9QhMWLLRz8fLucHt3QnbkrlUXS\n8Qs+AqEQYVX3mqN39bH2o0Jcsz37KKIus2JFDbV8s2HmeVkuZPuZcfIQze1F\nf0+hjWAzMJiqUPD1KDBoLObpGoO15g5bTaK0h8gfoGrPWzHkPFvCrKtYawXs\nXYQj2k/BkWK+G82mSCiZjeuLg4XCih/DWhJGSMMPdaJ6d1FMJdWlJBXPx/kM\nxSDyzGdo+Z/1G4dJNV4amsAlS7WfT2HX+cOVEgu0y4FmajfL0GLD/27Jr4/Z\nT3iuz/cAskdp3fkqExoleEAxcPiG9pZeINX4nSuSiTSTNz9Ul5jSAdg6ZdaB\nZJmpLc13sfc+kjk8pHg15/0fyh5TVFZ2j7y0iIGCFp9udZhNiK70ybeUwE9J\n+Zdis8F0mCvK5uXEKN92rUhQDkrPtEhE/H0tPMXkKEFfvE/F+/C2w8Kt/fKA\nlGuH/rpFCxAxMUrfT3igDNCAKdkbUoQgagqM6D0QNnE3/pkBGCPSA0A5xcUw\nIRrus7hQ1yBmR7QFVRguIaezEVc2w9PYsCeJrep3u/LQU6FhaT7TS1Y07sbO\neveV\r\n=auDT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCpdjYyFTkeBlFA9zPr6xiRQtpEaERhtxVOdMZKb1cDQIhAOHRSSQ7ezzCfoqjOCozMUsSEvKtY4JzdIfHo/BoQzOS"}]},"_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-tab_0.20.0-canary.ea2aa477.0_1604966299184_0.5742486008304899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.a2c088dc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","@material/mwc-tab-indicator":"0.20.0-canary.a2c088dc.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.a2c088dc.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VN1CzMmvT4gtYIAE0XA1DHrYZ+32edfrGlaxoRbLfn7YRbG10g2/LzayWfNJhG8vPUGaug3/MjIw69+iCtWi/Q==","shasum":"43ee33a095a8acbeb3e7a22a1c352620fcf903ce","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":57758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKXCRA9TVsSAnZWagAAT6sP/1JPf4ILdai1QFi0XVZg\nynCyvFAcMT08fKsS90X9mfb8w8ZuvrcpD+Bbq/xJTmAKdU+u8UBpxGpayj7T\n9Zc/pgvWycGUqK5t9mdkMbSPNdUqWTuZJSqQHxf65EHy7Eu2aK1QEO32ht3K\nBAeT4PKyxXKXjC1/x09W9hJibnjW03fo0bVJBnsvUnuJONWbqSFd98vjRwU6\nb/V6kC/G8lJwoRvMtZX5aw+ocl1pBdAR98jKSi+icbPrxznKMlPY6qYulsqW\nT6R/ujoEodO2Npgt9vgLcuLBIwHQTh+wWzbs4Ol3axruBxVKa0FhEwb6WiXc\nM9RMS5qAcU1hVsbuSvxEI0lXx+eiWpu3qhwWwBJGOm4I7tvtMKLFTmFr6SwF\nCtxLtbIhgY3Jv5EoQ93MQjP25vTNpV2IV+zMfe2/EqUQc0jsrSnQMn20qtlh\nwfwK+YWfNr/l5eDw8SBtdhTc5XZA+hkh8wt9p1yZ0PppzO+ajw7EPi/ghyEt\nIL69Jc9tyuhRs4JJjlXFatWpVVTwtzB4V6DDoLTi9jTzkLVGaO2fddaFrIzp\nSjfZeUaBEApyKnAZdGPWFQQjRV6mpRPWeEf43e58C77mNPsBaNKi7LhpH6Um\n+FbH7gEDB9cAFq7l0chajOEs7l1p7sDlOZPURfM3LxZBGqpPAEAyGwcDzvud\nMpCU\r\n=UkoL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdCmuP6H7yxCOi4YyoZbQZ1RulhTci/IDRU539BfjifAiBrbUKt9SUrSTsdJOZ39eIvV+5oTaoQesVlMAvuaTf6bQ=="}]},"_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-tab_0.20.0-canary.a2c088dc.0_1605018263249_0.9293461145392097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.b04d71d4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","@material/mwc-tab-indicator":"0.20.0-canary.b04d71d4.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.b04d71d4.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UbAoZz1uZPfdL8s3PtEiyOGM+wxuG3Su3JAFEYDf7ZcRST5kHPRUpSwtAEwkbFgYkzhPY6RjYVLfidwURCWT1g==","shasum":"64255a972ffd2d984e0bd3ccda6b30936636d041","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":57758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGKCRA9TVsSAnZWagAAZ40P+wbXKAuSosjmBKQbt4wW\nKz8SafVUKNXZNxBwaJEFoB2IdQGWDRSo5fpYsn7qplMNtnHKgs6hmW05AUzc\nU3Iur+szJ9Rhf+84e4Br0sVPzyOw2X79iN4ZJM75SSOYvycVFwcQLDRwbSa1\nTat3UZpoISqe4e8nzm8tCd+GEnhNCK0dAS64FXIB8rmITkQ9RoDEtksJjG2S\niZ5z10zC2bXYLqpLErUsgmoMsjCuiEvM6e56HyWGu9SISpnkhi5jLZMJU5f7\nXlATCZPg4XgAzZPw1XAPOyp6MT/+WEaInP+roDZb6wUAhjHBS2k9eXWAwWag\nFefjGeemG2lN5dNWKHuoKE1T8njK+DVQ568ndMz+VfN3pBvJwQLaKyZM4NwY\nYaaWya6L67UK7ajJwWbs7ziYm90t9JaeHBcYhxcmfteCLzjTt2IfTCrfvSb6\nLn7f6DfYcTxzKKL8yXywrhc/8JqpH06YMHTcddNNPosv60jtnvg3l0q2KE9p\n5ORk4f5e68Uk1Vm3CLDWvbd2h1PZqDRcRcxdeHJHrSAzHPXOHH24w604O1Yo\nsuPisMCQBKFKF6HkkpRw+mfnNPu0TsMeYzZBZdxudOBdtzC02//QSWYu0bBE\nuaa+Kbst1kYxNZxj1VAwoVdk5zaTdW6tDYQ0RWgXHgG10IlyMRUUGwfkw1RL\nIET7\r\n=Wctz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJn3gUnqRPywlpvSvKO7vSUvHnonCJmmlTUS5CtOzqdAiBc75EGvKiAod+8mlR/uOqgXotwMkQ7sUfOzw9J0IfnIA=="}]},"_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-tab_0.20.0-canary.b04d71d4.0_1605177738022_0.676978504134617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.2c553352.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","@material/mwc-tab-indicator":"0.20.0-canary.2c553352.0","@material/tab":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.2c553352.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JYjL+hjTG9p5xRHwGcJS/rLujHp3CWM/KFJmOvGimhohSdSO7tB/wQZw8icJPn/QSnJ9oEvrj68nfcZnSzrkDg==","shasum":"8dd98430cbe3155cdc92bf0ef7a51f5f469ad163","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbp3CRA9TVsSAnZWagAAChAP/0KVNqocrvpWEOcOBpM3\nx+1XGryiAI7GmZu6356Sj+6E2/w327C0RVOdjO7IYRo9cDFarOBxuFwPCasl\nO6DtdE5o0D/Hh31LObyTDjbY7u/uULhSz87x8NlZFC5zbC9Y0Wr11g9slsE9\nKPI8aSPFCWZiJBVXPuvXzCjJbX1wIZuvbip9/DHzs7MPfQ+IqZ0X8pnMnL2y\n5EQBr5SfKTPYsGkRpHRzyyZtsiLmSllifjo8wHMELHDK3js4f5ApL44Qbp6X\nHygY55C+qFi4NT1giJfs5ugFbgmJhyPXccEkfKB2a/fapSPDjX1LsWzcknJW\n4BWTaX/cNIPpNDOKcJL9Rsm/S7oEFTbpYR3Hcz8h593n7hgRFyHBSGQODK6k\n0eqHmDsMLU8s5LrSMTMW6DFu8Z6B2jF9oPKU8+F9zsWzLgmx9BMrK6+PUKyz\nu11zbYy2bFhW+yvlfJpjKKwpu53RVHjgCMP1GDiqzcmpIBlwBLsRDM22AlCp\nfNAc2VoiZXxo66aR/xpBYqp7QO7AEZKVp8/aUM7T72wNCaDmH6HOfD+XziBr\nBC5aH+OJG0vf2+Ck6aF8YR1xbHyRkvJ7tBxuI32W9CisNkt/0kOIML4jYpvh\nJp6qs1JGdpkWulS2I3wBjzJ7Wh3h1PP5LIJeLP1zyySbW1S7GVsD11xfrPbU\n9xFo\r\n=W0St\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmsaYREup84eyAj3vDeDSD5aAJdZk0K9MhzKkQBn3k2QIhANPXYGD2I7csCn9IgkUpk3ZjMoUcdfAmSUmxT8UjNn8X"}]},"_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-tab_0.20.0-canary.2c553352.0_1605220982874_0.8521333545150438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.6560d19a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","@material/mwc-tab-indicator":"0.20.0-canary.6560d19a.0","@material/tab":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.6560d19a.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KAZNpj6805gIbIbgpdvUYlvvKTIRQJ8Tx/WIxoJ56gNBfc1pK663wE3UxAhGXJ+PldcyQvPuWguzEW2S1CHu3Q==","shasum":"2065dddb35787a6976e95056df0520d9a4657a06","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEqCRA9TVsSAnZWagAAtJMQAIyQzuE+jQNfyvRBLUi4\nVlV+QFEJlOEZdD/m2yGOlG4VigFqUqBE5RtNF76s8nRBme0bWzgbrYgiwWZm\nI+Qpzh7xdW0hJU37yJ/3LB68Ixn9mE63qpI40d5BuXHYfxwql82sIZnntftl\niPYitm6ECRQu7SR1+WBZWj8JTKdJdTdhTV8Zn7pJOGgwhY4HU+w/lWZPNhPq\n350Al7YuYL69TOUGFJq3zdCUp+GzZmOhJoAmHL8T9emaQxp6qdejhRgACkgi\nIVeEvS6bm8d0HfYAO1CtdGJSL8mcwxaaathGeAqDUDxL5VZnrtDRhnhm3IvC\nc0WZYFboFT9L5PEwe9ArbFwa8iUMK3EJGGI5JxEmT6PNo4c9gkfazfzdBxgH\nXyLlm3BJox9wB4f1dQJBa7y1ZLNLEbYbGNtHXv4de3HzjxFnWt5pgCs1ThrR\n18MfyBqAuxTJ+v9oUY3wHq7psLpx2xXKRRq8oPM46lxUhCqaZvDHKuGNPAyD\nRdNLcCEoZ6QCu2WJNmoNmDSwXH4z/bUn8xGkRetB5CdWokkypepQs7p/0wBb\nTv6DXhJv30O/uR/2DzHtWAXS2VIBjjDwNEFQtnZ9AHzFng/fEpgoHQdLg1K+\nWwF0daoDbl6vI4ikX/uET9tb/1nj6KT/rQH1XWTwaqmIxnpKHBcbCMFpDuNW\njQtj\r\n=JxCR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzugQhIqKIHHPm649d0cFS8Qwrq2U3cVOfBjb44DRpfAiEAt1TWBGB35EhIAvTjl8eB0dyFqQoZaknm5cGDQYx9xlk="}]},"_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-tab_0.20.0-canary.6560d19a.0_1605300522352_0.47799234578764427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","@material/mwc-tab-indicator":"0.20.0-canary.a28d5ec3.0","@material/tab":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.a28d5ec3.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-R5ZhISyNN7LUvTi2S+2BjVo8zodBOK+ibqFK6zOTnV+/2liunsARtGjQ1eYOQynTumQDkfjAmb1Ka4+m+jv6HQ==","shasum":"cc5f1f445360402b673fa9dbf206f13287b95a7a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+smCRA9TVsSAnZWagAASj0P/RjyWXl0dHmJYdGYDu6q\nIpEZdlIxvithuldnOw2ErWdEir2BzxlW7Ck411IiXrjZNwUm+TdY7GJm+qSP\nM2HerhhmWTDOq+L88CofuwgQvll0Cy2nvTtruTNCkRjXckila0odfdEFxFh2\nphIVGBBKaYLC2fZsUOL5ryJ5MPgKQEkP+EV+6Fdt+AHfvDSfTWGFpLZccOZw\n5uisksmPdF2pkBCnEa98vYFjxskn9fkB8FnezFV0S6195eUdtNHtZR7txeHk\nR4BN7HgIgK49027Y4npd2wFayAcScUm/Ypfj6gQQG/TRpJA6zA47O0d7BQeU\nUvuQd+MiuCO2qvGIRd7kR24hgw3EGC7DzTLV27C5YsstM255X03kATutXuyU\nb9xwE2jCeXlosgxM5o7+E6iGodcK+CDamGicRXOzU1Xe7xyP/mpI4Cz60e4F\n9P44178ElUa+xRxKPTQI5ouBFYFkL4Or6aGZ9AvhLz7g7TQ0mWvL/W14O+jO\n6/U1zTYZhZ8cFrXblGvUxPDPZXXikDh+AlqcfEh8MTbV4ph1FTC3yw2zwR8e\n4HedUyKha1YoacN11N22MLuzOZUzMIFKxiIuMSaQmgFFshY3ZalKc3LELtjK\n3x4fm9n9CPtziHN27ZFVRxwPeFeX71lTeVyPPkICGADn7uMDsX4aXRaF/2A+\nbvgA\r\n=N3qO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICT3yU4ZZoDYyaOkSKtmvd6pD4fua8yyWnnkWRzkibpWAiEAqYiU0PqrBh53LHRkpJ2eEFagzZojsmk08E3htQEKLTs="}]},"_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-tab_0.20.0-canary.a28d5ec3.0_1605626662281_0.7793082328217538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.03e7e778.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","@material/mwc-tab-indicator":"0.20.0-canary.03e7e778.0","@material/tab":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.03e7e778.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CyLBdaV3UQQI1v89GhKi4Ls5nvgn74CVxWp3MIH5vHyYh/Dqqyl6tF3Gvc81XRZPJ3WKw1hSF7WFTkR3D5jtjQ==","shasum":"7b6341c413e322cb2910d5d9ea4630e8edfe7100","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPnCRA9TVsSAnZWagAA/eMP/005jHAkEIkz01T8Lnea\nn9uWlucaJSVUq2dfgG8Yu8Xo/JE9bSNFXEdDGhKmjwLTxQqCKOgr4I+ENq6d\nC/6tqlJmYXxOVoGnmXTzE67pXIqI9aYfq/vjbcHlwYQmhg+rHFNjnXLpg2d2\ncDuxnLMo480fUhtBEqsQY7HXyjhj8UBhPvWYukIfWPdk0ppTmDzD+SfL3cg1\nia6l7Y3nWkOSSWymwl4AuPa2SO3OXG6iauRow/duBROjl+sOy0i9UBmtMsnk\nEtvgaNt3kzSfwgV727SunCevAIZG8f280apsol3+egqaBh1jD+Z47IwkDrGA\n+pK2d2DpIq0KizzeDa0BoYPyzYhY1UqS3uu9wpFWysXsMTJMi0RCuFnLJRLU\n4kUn6pFxY5EbDQUmjLjFkg6Rve8EdRGQiepKfFgzTjix/45rytVw2ZYc4bxr\nWD5NWgPYVjqgG3LGKuEIi+M11mxC7TJvNMF4D2J6afEmcHlrqwV/8VnWGq/1\nWdT3LvQgSY4cECH9juAYO7Ago6wSf9htNBZAR9v0O7S7DBosr9uRn9TQftpu\nHPDsgSqUyI/0UPmmNq+fVExjLsqKJHonMM6CrrcpU9Ok0EHKqU3aRP0iY/uq\nmqeVL8D0K/PxiqAsVAOCEPd0JoVqXWYnVT5W08cvf5og+8M9MmyCESm9b5Iq\nmHB5\r\n=y4ER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHcumSOQKBVe2Q/JjvVrFxc39kmyomTrBY9vkaNWWZawIhAMMOIx4sqIakeGFeF3SNeSczgjnnPh8+1mZ3jmLambUb"}]},"_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-tab_0.20.0-canary.03e7e778.0_1605641191198_0.39129840704844954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.ac8ed597.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","@material/mwc-tab-indicator":"0.20.0-canary.ac8ed597.0","@material/tab":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.ac8ed597.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-g9c9jutooUnDo4QMYcZ6b6Xs36cZNFmuDl0EcdAk1uO+eG+sZDBj7/vplTp9TU1UqgLCypZv3ORscXwpbUUDNw==","shasum":"64d8bacde0c5a83a720a768ca595cda28d2e15f7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEq5CRA9TVsSAnZWagAACWUP/172DjNscG572YK3tvD2\na2sM4iQMzEvRFubm5ztIBw11REaXZrg5irJMYlMCS629duTW8mOVj9iErrMY\nLz/lsbugT8CjF5GqLAZz3j+LBqcfyaPwl3lmDMcP62K2o0iD1KeN/mStn8uX\n2pWljJhrPXZo7bhjoFI/9N1g72hGHRCopLG8KHot8peV6UZNjoEIQqAqLEak\nOAc2WpdmL1OHYDjIc/oV76wQCQf7Kq6CD5ZuymU/F2daHu89BskH6Yq8mqGd\njcRp9WsJMhVQvQuikKCvaIZVAfkyBjrZ7Cx70BASYptdwhaNcD0+fEUDiY4W\nhmNx4CiN/YsJsm7ywiaoat5FaP0wchI0/uml3dpmdEYkekvtm0bYkiZA3M+9\nhLzq1ggbJqkZsy5J/PcoOlBVSDx3WrjCcxcegzIhYJ4TbZdayIJg5GANFgP3\n+YGl2Vayz81771cOOKwtnc7YlYpV1a1eorF7b/sbNNhX9Gss+om9ybo+3dZU\nT3zxER5VHDVMa3/ebUXAICvLtZvl6ezX1iGuHYsnh+NuJ9mWaGgJLLvyynUb\nQIHV62BcieseMCMcsN91QOvhGTbp6dP1gWUdQyhbznCoGjTW4gOzlTkvl2AU\n+3XvmvAExL3DN67PFsk6JRv4zfkEnmTd5Q3u/qo8rQg3rGh1OZWPxQAbzuSt\nhcPn\r\n=Psg6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEWUsmAwjwE4rXs4WnhWImW3wnga4xonhFi7O1J8jidAiEAyFk9ztTvLwIK0tfdMSjPfTHMzwhT+lM+d0d1ytfAJd4="}]},"_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-tab_0.20.0-canary.ac8ed597.0_1605651129211_0.383625233117312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.b6a60f60.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","@material/mwc-tab-indicator":"0.20.0-canary.b6a60f60.0","@material/tab":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.b6a60f60.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AhKBgf1oanHBVUMSF5ZcmBWYLA3Rg63yw513D9eZ1rzTCx1OUqSU3Z5mK2jJzPNQz2Mbcnm2QH3xHvvqrZ1vdA==","shasum":"925328303aac23aef581df74a19f35dc93fd37ff","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQsCRA9TVsSAnZWagAA1NMP/3UwigKCrGFQFIFnZc/G\n2uBSLs+VN/aIZaeP8lwLBCv7K5KQpWQRTi4lmlnVIrkLVYM5oOBKA0NPteSb\n78OHaviq1QOQNwWLK99E6PwL5Uvij2KBdJ7mWpFftS7NAJCHD03kWaIgiHKv\nZlZLOmO0RiiReAL4HJNix1Rfuf/uroonLDaL0nK5id9DJmj3Dwraav2vOn2P\nBW/RBtLMrUlBLA1XDI3OYCKdDAeXnv9EKD0Cyl+ZrtIaHcflqprU/ZwIfyGD\nSHsiNvPQtk0hhGBtngkaxRX/PstvnuzEC5+ot1hleZtyV1ZBTP565ZmDl0x+\n+RZwCiYeKVge66Y5j6/DgXHX0Wuq+2WXF9MmKa7A9JXKG0KTOpJB7PdsJZ/6\nmefFEA2ojJzQQLB79V8kD56k1G6iwtyHv1I0Sy9sJUsfz41fXO6TBROg0nC2\ndDROTbteYzUzvukiOP6OCUMwVLPMdeoJOgE4B5wDymwb6TESekAjYhL1Q0gb\neYkt4sPNNyFBe+bTMnAYEvq3XJhP4Ga2kfWbcf8n78inNPWcCG1vaBIKTC61\nlEvI5K5/BIPZC1rfktRhGKs2vsiUbxPxlNZNpSCHRQcTfCIIgzAOb+B3VNK5\nUT5BP0r9bnbjK8qCxud+5j8AAQwmRbW4RPktHnB0CHT2xDp1qHOsGXJzSWmc\nQrZA\r\n=4L1L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7HjxXRN3Azza9MmK4vTm9lRZ2N3qOrJCOhEwkcqG0TwIgfm7Ma2wirT3DlXlQKH098IVT/TzKUBviJllbD9AneVo="}]},"_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-tab_0.20.0-canary.b6a60f60.0_1605653548413_0.9116472093838275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.71cc24fb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","@material/mwc-tab-indicator":"0.20.0-canary.71cc24fb.0","@material/tab":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.71cc24fb.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9raoIpC+R6Xk+p2UmLmYce/un84mJAn941nF77cXJtr7r1d4KwQPkg5QlkLrjP2ZVXiym6RIFS1R6DLD2GBMEw==","shasum":"9656ce68694f0c53a63c6c14ec0251150469b613","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":57757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnrCRA9TVsSAnZWagAAdu8P/3KP5ChRaFya2GP6rFNH\nnjELhAHCeP5rn+FtyaIG/k2hw4MDtL2trznIxZz0/AZDC9lQoa7VIUJJmdSl\nkAyIPq6LhLNmqBLvpaTy9zu0gSudKHKOXB6OKRvS/GWJYIUHLo8X/2oGpsva\n0RfdNA2kO6oHuSQfSzpd1IiMFoCsIiOYpsuiSq/lU+lvgt8kpy1N6b0ET904\nnuICoUK860G1HeQJZvA66xB6pP/bYQqc3QZDOsgpx70omZnVBy9VELTa8r0Q\nxop6wanDEByCkxCqYivvKhKOxdAZ+vlxjptghTx/2iseDdQTliK/p1tNtDC8\nPwXb4NET42VJGIcv3QkIS3dEyYIWzcqJ4a4wGRzi7v5nG+0RoDLPkZYz8hr6\nk1PN6rQtZ+W5qfLhnPIcLHoFtNApI/6VEp/KrQhsdTeNTXAtNh6bABPXaCIZ\nA5j0d+3qqw+alSTFKmfEE7GGfKzsLf/wk18VMlBjOv1p366oK7nOXAgg0f+C\nSu8odA+rUpB0qECgRQtaUs3jUu8bJJTDgJPmusqA88dqOhJ6SnCrPQIgPOKx\n/8tb1nGwC3dP7UMlbdxinrITpUKBUx3jhV4kAVkCmlKZWW0paek+1oxcXFI3\nDjgz/eBFV5cjKG61e6AqRBDn3ZlI/mWsjMyUbsOlYDgJ8rw173mzjoYR0oAr\nN6bF\r\n=LrQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI+1NqNfg3fG+r+X2vXvweu7cX1CXbO6vmS/7RQLcRAAIhAKFejCvfZqVrmaFFi6w2oLEQFGEnVaIbFxuaBi70RQnq"}]},"_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-tab_0.20.0-canary.71cc24fb.0_1605655018695_0.3168350170164118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.761027ff.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","@material/mwc-tab-indicator":"0.20.0-canary.761027ff.0","@material/tab":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.761027ff.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-W7J6ArbeRqqcdvwipgXT+/Zdu+a5SGXsSLu+38keLMpT06IV7DX2zxWWlretnEWMXBOqvCln2/KALdsg7QmCpw==","shasum":"1b77550788ef9c302edf99d7ca290bb0f5b315ae","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":57907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzFCRA9TVsSAnZWagAA/+oP/AsruGItJVis9nlIpxXY\nEWCQ6hbn/GLBoyGwa+JC9CIOuKx9yXpHIp3z3q+lPY7nC8bXbF5LVAT2Czo8\nL25j66xL8yFfkZyidYqKBT925mPYvSsIBSqzPJA+7qwCJ60c7i7rscpW8J3j\nPRX6tD4TcdKDWBviMFmSqNM9xRC+1JJO631wzC4eWn3Tw8CgrXojb36vnATY\nbH3cXKitqvfa5Um/lyuJHpLWB0muDFF2zuVxFnhyDCGOUSx0wcmzYxobC0xR\ncOwWSgqTiz/Zl7LDu1K269Fh8YAHXSGSOUQ4R4+jUiv4iyiFP8oIz9JP2rUu\npxgZHFQimmbkozv0TDMi5bdLVqSrFHCkRKHkRyh3Fu9OQfC9eg5OKj6EgRSw\ngA8Jc2KG4or9woGW2ruAGwU3cjmEqkFPLHUfFPTdRPrvEGJVpjdvfCQDntzB\n4PWtY+ksDpiYJXBJFq/JlKoUdJ41xV6uy8BjjoNg3JUDgS+IQDH3n3ad+NO3\ne5R+HEWpui7um+SIUQkADa9nNDGxLcrDe7Vvhzc2v2QLD99n7kN5Ab3PpIY5\nh/NIfPidIBoZiXa+4wV53nn6fKEgGqGfMpbj0NHR+p5Bi5g49APA1AyIJyTe\n4sFpv1vx3ikKfbXIJnOkq0DwwmL3+pBOdI3CAKox5bB8WBN0+9NkNo1yAOQJ\n6FpW\r\n=eH31\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj+XOJjbXx8fDj22ayatzLk6Fxp2mIVWyJMNqLgmEzkQIhANr/UZEgjPOhVXZDT3b65UF1fYEmR4nd9Ug4vjYvcgV4"}]},"_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-tab_0.20.0-canary.761027ff.0_1605737668472_0.4664389123289061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.dc93d04c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","@material/mwc-tab-indicator":"0.20.0-canary.dc93d04c.0","@material/tab":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.dc93d04c.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XDUSGsXKXacsd6yC3I49SxS/+uXdrAlRWI6IPoRUepWzJgjo1I1OVcwkZlmcIn79GNoimQhDi5vY9Bi58LGIgg==","shasum":"8bcb9c6424dc4fabd0474762cd6616207ef0befd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":57907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4dCRA9TVsSAnZWagAAOcoQAINw82RQhrNkIe3h1bkx\n3KtFw18b6VI310ylFybMmSF1BbBfpnAxf7SYBEave855F68ECdmmJ0Qe/UbN\n6jVYvmkv5DsOIX2nmVyTaknN1mwL8Wsl5xa2q+k/Jp1ufxi+eZVr+dg44blD\nATnpjMqksP7lCcp46B+FzNs/CtaM2jDQRw0lrfwnuSNP2gfbIgkzCRbvJAlG\nDNTeUmNxSLSWc+T/VjDYYYCpv78pgdRSZ+D2QLjbfnbby5X/pzGJBP5CAmD7\ngI8q2TtE5WXZkaap2D58uclW3v/aAgYU82o1/rjYQRIWb5rx/pvtCXbI9LYV\nCrXS7cXWfiGMjzMj+NmVj1boKQS/Hj142SwZSL2+kf36yRTOE1EMRbxXo7Ek\nyG6503xla+qYJaVEj9JlqJN0aoim4IcPcslRX6deOZ5iR0Jj+mE5D+4OxPvu\n2ABrRTpyXNfvzNUP6LEXshXyuI0ejVaUqicoC6bYHsa56s+cFJKjpwvr89Dg\nnmrRVYO+WIlMEsJt1Z0uEexQIg5djG+UgAbqXrTph757l/HApe/rIVCtVq9j\n/+fTDl8BQAYis26Heheg8KU7mevGi/W/lJAYZq0AG7eAyCO9UP2z5AW7q0Yj\nthJn0eYa9iDOQiq21INX5x8KRmxYrkSZhgiePrZRsd0Q3vcu/kDkvMvmXnty\nBRE7\r\n=pw1q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrQne7H7xjObx+HXX7U/IoFih4cwIpX8NZz3C0iNgxOwIhAJcHseUENX7zDC/XgiM2D48qunwsFr/I5iOWATWMiw5/"}]},"_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-tab_0.20.0-canary.dc93d04c.0_1605738013253_0.6003855971228667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","@material/mwc-tab-indicator":"0.20.0-canary.4a5d4eeb.0","@material/tab":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.4a5d4eeb.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ynA6jDfroe15jJDYMBxM98LqVPb+gRlQjxm6DI2jRNFb8nVIyl5QbkmMa8hAIidntSOgvDhr88Z8CWYgqN1T/A==","shasum":"cdd2672f8c32f08208a728fc78c69aa3e21bc8f8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":57907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftlduCRA9TVsSAnZWagAAyYgP+QHKwCqx9/g/SlUMOSNd\nythfepcSg0GEEYUnJTgM03UosBT5T/ZVZkYXQ8dhAuEFwC1yCpQSxPo8+5QR\nSzkTvjvp2fsySxSOE1MDezDXPdBkAipVTCNnF8voENzaHuKipyizoV8J79eG\ntvyMCmURnarXj/K8E8quW+452oQMHFHie2dDJt3zWT38EArW8o5btBT0CIaN\nTnyT3VcTbO79UbCb7z29J+mFD8KESM+Dt9M1zEToRtx8Hp+U0o+iSZhzdyBO\nn+/XBMN1bRWl9P8xe8oeWPxI/PDmRwcao4aPNo2jODwa33+YEQSJI7S3DKlH\ndCNZrQ601Z3KvgM0yMXxhvUhbS5N/wQm9ma1BS90AvnPRwrnPG/wuU66f12b\nleD80xGQxFNalACrJ0jIcAWXmMMMtmPpd1scv4eg1U9FaV1in2Wjtmyj+cUS\nk0W+NB8VsM/GJgsPD6obPYJeo+sVKKdEqbkDxtTnBXtVAdvgYkTbC6ZbF3ek\nRhir3IRHFu0EdsYLnRE9PcDKESA9utGW/WTp+cwBmM80AjlA2KWBBhYebeUj\nFc8DWuIngWR4fhWR8Gmri5rTC1ZPq+nRTE8xSQm3aP0ewvDAAHTZoWgDrOX9\nD/2V6KWS+Vb7fqvKPf8BaVHqSJeP6BoZW57QKrsXtfUZ9+JfRqndYTWPKxJW\nuRTN\r\n=7wGj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4X/aYGEQMFNgvwN7/r5GxoSh3XM6lYaiss9M6F/N8TAiEAxw2PoA2f/ctr27DS71EvDDzkyHKNLHbA4BbAv/s4fRM="}]},"_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-tab_0.20.0-canary.4a5d4eeb.0_1605785453864_0.007574684243503382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.bd176a15.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","@material/mwc-tab-indicator":"0.20.0-canary.bd176a15.0","@material/tab":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.bd176a15.0","@material/ripple":"=9.0.0-canary.30c11bfc2.0","@material/rtl":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4vBz2O5e3AoVedkE4fJiol33+F766bkw9AB7nZK/9uV0w0u4+GOHsb3umf9aNjGlUdbHa+tbCFENHl37gbFq0g==","shasum":"a2ddb0a15fcfd440352d9713490bb735d03391a2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":57907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMxCRA9TVsSAnZWagAAUWUP/12ajxu5F6d/4RjylJfZ\nyXqAJRNDvr5y8NqD3DmpyqJ7wRQZVuD6MQ3TMDo5g+EWNlTPJKdZDTpyZSua\ni+/iFZmPS4yRvr+T8qX5QLTEUFu7Gcum985yNBK7NDdcWsadGN+038GjejHW\njmFP+BY/tuF6pblaPbcIajOoak7cNzzVTm7VVnlIsxtmp0UdXIsxHJTXnrxV\n4CsnDnuXKa/shsodBcQbZraNOm8w65Bs1RHsEhprEr5gqLIhAldno28xwd5+\nEcVbevRivtUkBxvD7G5Y/4d1AxqTaFys1hnzp+PJRhmt9PawekarglMM/kGL\nwgcnjg8QD9wApSW+kuC/nPAqHu3v1tBcWolu10aprj3wcJIW2B13deGP9kGc\nEp8yHMq1Kfl6wXTuXgVd/5+519e82egvHbh77J3b8PdzBXtZsjTSMvNP1V5F\nkBjq7p+ig7dOelpQZySVm1VSdXByDl5KYdkpZWVld+XRPpvyGrVJhcJCYlT4\ng4BS4ismTlPp9FNLDPrkrcCRcGzCdQCGnFo35py4xQv6Ox9lm8+/Osbf9qIB\npFRL22Q3IWHCWagdnl3h6F/SmPixf0r8Ad1GTR1AGWZAbZaHdOrTbpnDg6WP\nNlszrYOnLxIgI0yhUAYNvO1NRdXAhsWDYe0BoFMv4VR4qTOLnwosFVRym3Iw\n6It0\r\n=zz1k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEBnHBwYpIhZDcimJ48cIQdmiZxINMF0dQij7IEMIawwIgLUIXTgOwRfLIIXLytI+ERSEVuI32KAcwXiW7KKPta4U="}]},"_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-tab_0.20.0-canary.bd176a15.0_1605813041399_0.5058067395759136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.e85aa60d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","@material/mwc-tab-indicator":"0.20.0-canary.e85aa60d.0","@material/tab":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.e85aa60d.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-azlKvCl4vCdd3XQvcjc0E8sK2Dh3BGUKKqymQUgLxA+uD+SafvdNttVCLe9wNWIELD3rLH7symbxZ1gSqouWmg==","shasum":"d509f28d8691e8bc3c8f3eb016346ad059fd5165","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":57907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbBCRA9TVsSAnZWagAAA5oQAJ6GYSXuC1UZD84v8pBs\nXTPzdgfPMYntB8gC9vYz0iiJUV7rPYpmW+Ou9N8yDf/gKxKPJERXfwnpMQft\nCmBuQGEqAXkdb3wVezWdCmFC6EuAik5eSRos9I9HJwLbV3lbQrNFcqNyf9gv\n98ySIfoQckhiR6bcKV7wcspO+R0dlHmb4aah6mtb+d5WLnxSiC+Md1HqBy72\nOFFmqmUzJhC0N+N4EUOBtIpqy+6n56jcHDVFnqsJZGFxGh4ra5PU5pW/cuP9\nNkiTGCguSh0A8BZ0J+d0MLDFDPA9IqNCgWRTKMy7zQTI+ZDVe5OMmSuHB9wQ\nvj9nm8lBD8GkqpXDtn4touwEIGNllKvKGGaGtdAimBdfbfcmVCVos3fP7fjg\nxDefZeyr1H4kxZ1XBCo1NiH4wEJb4y504ovwe0DDBJCU1/qoGr6WeZ8ejWZX\nw6SEwQ0TcdLsNaoq0ibV/JhAuEGxxPpfThTu5lTXTZfAvw4PXVDgC8t89lu0\nX826HcsLLrfwSSCUmkSlz35yI1pqGtfZ/M9i3xrx0IUQ5XNFjKLxYuOmBtYK\nn2XvyBwPReBfwWDfn0+Os6j3yBBomIZyLit2ySkXCGu1jiA1tcF6FayxbKb3\nzuwkbttefqrk+xw7+MXahTqwgMYW4EHCUIxtFzPKr09lr1JJhaORKd9OsWB9\nNn6a\r\n=Yz9h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/9yGtBfmNIjaR85d+DhnJ5irTFXHV15YhpBXV1i0SJQIhANO8sHEvsmyzi6SIIjebpc1E0D1I5pIDKxQTyPqIufHQ"}]},"_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-tab_0.20.0-canary.e85aa60d.0_1606170305058_0.8858715452554291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.72092360.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","@material/mwc-tab-indicator":"0.20.0-canary.72092360.0","@material/tab":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.72092360.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8Yvv4cMkExVCsM7nM0YwkoDsymWJsphHR7n8Ssr85mndtgY3gYKVeTjK2xc1QUY2YC67VOyNa3Qr/bINPa+Ljw==","shasum":"6e8d75ac11153d51a48ac47a0839fc0580507318","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":64696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImUCRA9TVsSAnZWagAAg8kP/2z+7AIANOSXc0rZRWxX\nVJukFR0Q30+DR5OS0xw1fh2ggxaI2HoL8M+z4dkCd5IuJ9iaV6tA4xHDvFdU\nUaDzXz9FT+o3WLiXCsgLQPCY8OYExQ0H3faqTMR1ezUIXXH4ljnNr1zfJYsM\ngnm3ORa0YDWqR8VxnJqpfnLk8VzLa0HhvH8sJ2kZD08KZ57Ez0huM3ZGKja4\nImTPEwlkwvAvLLm3evoTIEYp4Qmzxb6yUgR/7atQ6IwgGbNF/cFOsyciiYQF\nus66zSFo0Do77iLsNL9DJAFEZ/0oSXBInQcXfaowEEyR+B8dABYV/L47COa1\naYl21xXygkG0bPvwUUPeZD+c0UlLEw3odkm3yC4VJEyQ3pNJqiOCUx6fTrq3\n4QY5KOR7HWh/hf45cVXcGcHzDYVjaTswmZo1qeXeDoIq8pBSKmBMaQ+SsaQT\nqNnua5uj8hWph2aUKsbdJAP8EVQkNlfUiAllxT7aN6nsQ3McAs9LCVQBg0b9\nXS33cX3M7oelOE5Ybe4ple4Xihyezr9tCdk5Ynjtdh0PjlBnaSxCd8umVv/+\nnAq1UJ5JHNFNgrM7G/Do+e/Gg9LnTNNfqYtHIQt0Hx9Umt+PdLPHd9ZRXH5F\nJFYPXPu+hBwmSnqwGHLWGwNgY7ahP3/H5UOG2rvoZepqgrpWAt/nEWJLSKdw\nmP2v\r\n=kmpI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvoe4SeEMX3U9EFogsvg3+MkoWIqTmTST2A7cHHtWtHgIhAM6ArU44dWmjfIm6wok+9uLaBqdkw+hFVxt0miY3TyZm"}]},"_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-tab_0.20.0-canary.72092360.0_1606191507727_0.035216001859141643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.baf9d39f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","@material/mwc-tab-indicator":"0.20.0-canary.baf9d39f.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.baf9d39f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8bQ49kVq88igPd4QKYNObhKHXWR3FnqzX0sYNytEoW6T27oat0NALOapA58cHP/nrgWh1URUmwkLpVLhr0q9Ug==","shasum":"4520e473b0ea13269be891ec18d840baa6694e3a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":64696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtE2CRA9TVsSAnZWagAAUB0P/i5Rd+qXiKIUOsi2AlEu\nH+VoJA7X3HlObll2h+/Me7aiXIKhJ64h0MjLU2wny9Jy+SZTYcqQ9Gnup59N\nIWLten9oYCWNjMuIPh6ZXWRFeH88ubWTwi1QBBDxqjkKVWxQEJZQ9JQvTmNa\nOjPLrsemkkwv3Df+ZyXgP9xThGxLY05GBsMX4AiKVL82dvL/dqmcME9i8+/7\nMeloKEr7bqK3dBClKo+GvZ9Ez966sWcsERwx5fCwxTlv5HWPU5rKzwOVtM//\npNWTmk7jS6MK7O7JI7yiSPitYE4GUkVsscOn/G0DGZcQUrR5VAAUBkH/EGLa\nNrPzIeiXRDexXYG0MPXEiWWJ8ccxCTa5d/f7jPPH+/ybfMMTVlnLUhG0cljw\nytoxQL4aVsq19HtJcor2W8QSvVyRQDeNijHMyoLCM+13gPQtSkNjMKRWzxs6\nQgDtVggfJ0icDIoJ9x7/pFeIFH03j6APakj+DMzT6lcA3hla9ztaG0X7c/lv\nPuB5oCr2neU3gMe3C4uqPpVXMGO5zMAIpppth3mANwdb9tgP3L7wGF9BiIGQ\nQi2SRL6SyoeA8W4s2dE5wZvsm9HwuHxhYZb9s5Nd353bugHsyFXPvCoO5zbB\nws7/kIFKncLzjFoifDz/6/ZyT1dXCDWnewwlkw1cA2uGO2+8/hzgAdxyEes2\nPb5A\r\n=iqmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhWGnwrfKiYL/UXLlEmZj4z/A+LDZuS8H/pCa2cwOpmQIgaUaiQ/uEyYBMworCP08n4Zhfh4ZYbH5jJ+40gG3ytOI="}]},"_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-tab_0.20.0-canary.baf9d39f.0_1606340917995_0.34885052538147643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.51aab0ad.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","@material/mwc-tab-indicator":"0.20.0-canary.51aab0ad.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.51aab0ad.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PMkYtg/wnnqPPerhPXq9eLs2mNPZSnbspaE6uKvWnjL/zaGCkD2/1atpQV25y50PUZKiryl7RHq/X90HL53GfA==","shasum":"4beb1e539809cf9d036a1172b1af7e55ee0c978e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":64696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbeCRA9TVsSAnZWagAA6eMQAJJbON5CPnSdH+/IRVzx\nDmt8RTWs6vdGWL6rivXkvTmYyL0Sd1XxM0s7Yjh/7/f0xgnzHsQ+K+TwgUi1\nQCNoE1cie/s7J4m43XNryONnnpeGtXSJYHorhB6bhR4a0YIgAQ/KjMSlZOL4\n67BhrZ5BcJ3UeP7GWamnI52/oOvRK0UkfgZnhofseAPvTEAPo44rFyaN+f/j\ncFylZtUUbjlWDIr54rdnII9/5gqP0t7gzd0KwgtiOuV/ROjhY8obvGZdUPLO\n2KrUi4VxC81CM28gTC5ZkbOYcz+PXehsJx9yfYZrukF5fhADG40EoKTNwWau\n27O0KWIkutH5WTmSCqtL9n8BnkiJcbC/KffIdxsIQu6tOACfZiGa2KAw8kjp\nxzXHX8fDBlkxfZJdTYJaYRJ77YqiH7MJeGaSIc96U/jklgo9bAk0ce2D31J3\nZi8//k3rRnMWyE+OAOccfAZ8vV3NMquKXg/ZuaaPp+uPgkhqfRXKeXJJ2Rpu\nQQSgYUy9Jw7PtJYtwM6Bqc5cv4TXySaYW7xDPQolOT6wMyrrC9aiep8zFC8a\nmqAr8pZ2nSPAiKwGeOhCEkQxmNuRfNdUXunX1I1a+OvnwXbfxOcXG4OnPc9w\nExKx6Y2rDrr7P0bKbPd6SPt1dXt/rMKi82/ftFejzRGs/M58hTIZ5icPG9a7\nZCua\r\n=5tKv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCssfzDKu9BWiFgHQ3qiSa8fH9e3vdDGHGaP4V75FkuSAIgBOJdTAWFw0xqzVQoT0awJ2IL+RjIW31AcI5uhhcf2VM="}]},"_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-tab_0.20.0-canary.51aab0ad.0_1606784734297_0.30590959383249916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","@material/mwc-tab-indicator":"0.20.0-canary.8fd4af5b.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.8fd4af5b.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ThmDXyCAG3DfUrdPrBordfWZobzKC24/sB+CSe+Xq4ZUCX+tuuoXjkLhbj9Bkl7rTyBAjIm/wrTzsrc3d2s7kw==","shasum":"12a7a6874e51a181ce22149d13c6586b47b73db0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":64696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDyCRA9TVsSAnZWagAArSYP/jGmwW0ymeJ6yDjTikSE\nb5/gOYiOE2/iH1ZB5oV0/kBGQ9GbYrN91nIIA4yPjnSRTOD1yc9UGYvixAYs\n2zgj99yNHiWeiqbrHo/4m1prNlSAKWIZeitScuWt/qmWMCjIpy9w2IrVSZWK\nUEODJhs+p+fCZMrudOwN/NVaXYpfj4E+8uT2dxn8SeW9aBcOD1OvIVN7JdpX\nLaMGHnpzaMoZpDHASKTXCvu+B0WsinfpQVd8zIiVPt9nPyAWGeVQvVR/zr3y\nDWsmhRVprbMdUexyg8yTnpgfPhnZ8tW9vQvFdBIEvmTTHhKkFIkpIfllJArg\nU7SsqJ0yQHFDSWEIZRHBBTg6/QMmhF4YM+RGg4askAMToK9s210xT5Ah1hMu\nsm5ilJVvvvUhEZuAyPbo5JCeLfyEY0DJU/u/TczZFOKa4VgkViQaUB26HPuN\nGRifG0vxwtIPf3T4XnIA12fUP1LZBO7P7PK9QvghVWNsS7C6ZWoP+63B4D4W\nXZzAHRa7mChFXJwGR2c+DEcnIlCCFiqg2SqQe17dujZ0P1otKtl0WNmdllkI\nrBmUSqGz0/BLnqAKoqXVBiDQu6jbzInvhJZKhSIckrGxs95G+gdj9puksWm6\nGhc5hgLvRH20b9NIrm6szvoi7QaKsZISb2eBoDP8PALs3lgSgtt14LrIPIdK\n5Cy0\r\n=zfKs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4Fb161fKttVipPkZ8/IK1dnopMGM952udtm2ggC5tTAIgC6dC2ovm/LelOVVASnEepHqzi8xxHvnFU0wpJxJQNZE="}]},"_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-tab_0.20.0-canary.8fd4af5b.0_1606955250087_0.4610164543869173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.26d14d2f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","@material/mwc-tab-indicator":"0.20.0-canary.26d14d2f.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.26d14d2f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/Xfoigid0NFTF2Yxz4yn90UfbFQayAMdnrEG0HIsXCsfFi6fZDjtmuOTmxJbFuaB2tsvOGc+AQmCB517R09n5w==","shasum":"bd8bf184773be779324fc179ee3d77587d38f740","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":64696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDenCRA9TVsSAnZWagAA7u4QAIYAEqgDet3uqwhaR3Mk\nPzPhS2yDNAC1eFFoG36rx6aBPaVdIrYyrPPOEIOdN2v4/1mh/qKPyQ5WKMH7\nYa6/+f/h017ADKaiNcP1dvJswNyDUsL5cNs7430ki6uIrfLJXIxwPTDB8XHt\nvevH75K+aNrkifpZq94cKjPcHzCjbeec+IvVcBhVC8Kns/oGSfOMQ6RtJBHk\nuFE/D6rPfvANGaJcV4CjO+UQnGhhcliBQ5FkiduDjRIUDqIMf7DgOyiqJMH4\nFCybiluHbanEgKqEvN7Q1PrbunQBf4ov6djHMsofpWaksvMtMci33ZjTYn44\nJMWZoenWecQNwrMn4H5K1CBm5zmmFPVhT7Nqk+bj/0oZg1FeCei/Ofk30xEe\nNc4iiwxOgNCdfDGEf46eR2B6DckdgjS8zjD4tCHcuLPEUglSMcTEsCJ3dVun\nYHutxZfvJYGOF0NS2eeCbjtxSlZu4ecj+23Sy4IuuEioHT76MyCIR1Wf2yMX\nP838/3HD/RXmC79SPVW0B2ADHxEbgrvZ3lIv+ydrkcgS8OGKMN8wwRK9j5Mu\n5JctuFYwU7mefn8xo4dMH3CpzaJY6IJ2uijLU6qDTB6Nt6q9ILxjGI91o2yB\nOhArhuCM4jvpTQoGSOg3zLrYXB2PGLsbiM7RMewaUNTPJEsciK3bp/mRwm7J\nifpe\r\n=nP18\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLMl5xhDsL2mGsbNKw5xTY3Lltd6hI/4WcK1K0sto86gIhAPog9sTodDxlyM9EI3WlaXnTMmBXwpVuDb/QJzPfs4vB"}]},"_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-tab_0.20.0-canary.26d14d2f.0_1606956967204_0.4306322664383515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.1663d7e4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","@material/mwc-tab-indicator":"0.20.0-canary.1663d7e4.0","@material/tab":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.1663d7e4.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7QBQQZr+fa5flo6BqGXCFgrsVVqybzz+qzeNvH5AkHdVJR1q1UM8VYdr/mH2Kp4kI1modNHxhozQEPzLXScakA==","shasum":"fc96af8a0f448e0716c7d4c909379841d5f368e5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":64726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDx9CRA9TVsSAnZWagAASNQP/RLbBYDNZt+qDNXmVsqq\nYaC4DtWSyJxpV+9bNYkW+Sy8Ki3rXQ43DtYnsgTTpqIBpYuNNF/37x3wQgO/\nJLirTuyxgrfnK56MTL1hsusNlDQ9vbBB7+TR7+MADwbLYXKiYwf5eqvYBn4y\nzLD5tNJG+AeETeblMXUv10DQ+k2Sv6La/bm+bKt0FLGUWM/tY4eHUssL+nlf\n/Naw3IqzuZNivEqUFqsfpdEkqtK9ywVe9BN9nxHTy0I6IlI556bYaCpozYE4\niYL0UqyAj9+bgMztxgnc2qHAwViYvyzagv/5sG37gCCgBbTUygMyaaMhHbob\nl1JCjrtMcHAdV0vSg6vWzKPjsid9TCPwRMulZZPZuruQJA66PDwyxXiV6oav\n4ZIwc7xjnnFDqkkp8uUgyYSht/vpioLgtVmLoMg5h0p+mkFcjYmIb3b3VbGS\nE66ZWvxPxE/09l+q/2AttHcZDz3SDoQCnQ10YSCBKPUiLbaGv29H7If264wZ\n44DGyXkaeZ36fkUel6B4fTdEjgEJU1mH3um6JZN4bpDf9f25WfzHSKdKBF1a\nYL0sEikiAb20as7XOjCmUicQDZn64YZNpdfX485B61dXdeVfpNfkDP10Dx3D\nLKVOeSyJ3iBskf3e946WMy3NFN7I1FvHk/YH0RCZRTMC7F0Duc/I2799DNAk\no1AD\r\n=Tjyg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClCZR6TKbFUP7Kzdw9WG0ZusGVIwX/MpLcXUn7eCKNOQIgUrQ3IUvetPNLSw5q1cMdfUyuCiycOPiQCQje4qXGEuE="}]},"_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-tab_0.20.0-canary.1663d7e4.0_1606958204679_0.35349318669888286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","@material/mwc-tab-indicator":"0.20.0-canary.cbe9fc12.0","@material/tab":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.cbe9fc12.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BQbU/Sk79nJrb8TO75i/gdV8Lm/SvYbQJRzVj667c7wpSgbdPiLY8BKFeNVoZNcvKbh6smfGTr2+Beg1PMXZ2A==","shasum":"c25257264eebc3b6a60e80305b56ad74a514576e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":64726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTd0CRA9TVsSAnZWagAA+5YP/01OwUQ4/Pf+IBAgxUtG\n3NsBpTzcxDQ2RgzjRpRPsjrbmKlTdtqZI0QE5Y3A3gCAnLar+gPShOg5BuS7\no1cvC9WdGmlb8R2Wdzdg0+LJxHuRcvBt+yopVpBjVc7k99PXqMqcl5s4E4dY\n4Tv/gVuEH52F9RleqiGMO8IWgeOtpesqqPMbh8/unSXrqulic3wBNQXQrQNR\nSB78iKfWtaZ9T+PwLmzjMU1bJXsju5Z0owMyL293kyR8mlIiFvbC0Z7CN7NA\nfEmg82NQResq4gxq/zK7L04+gAsnk78xWm+1hVWPMcuoH2/Hp4IAh3whRTei\niPZjeO92eHDo63Hbnvg54myXiOdQ188rJ0ifWymCnbg53yhDUGMjLbAF4s3y\nthOBHXk2LTtoOCb7qqN27AYSDJtlu5ltTVPkBEVoDOBkKWwxCGqrMknI4vnI\n/0pL2FstO77xS35ea/MD9V/VSmJgGjysTPgvaALJ25pel9c3RqgXFszvS9Ko\nx7EaC/iV/zlRGeWTCZlWuzXS8ia9mtMMmtMeg48JE5rUlmuJHogHZSSpFEkj\n0FtfIgpmcuEjhmRS21sSlS7VIUWSTCBA+IOY7KNsnFozzy6A/wge1Ayi5iSC\nho1QTEe2pLl0itMWB2p32BEMl8Y3QmQebFKqGSZ/4+9mqnOSn6+2Jh+6UBA2\nr09F\r\n=wJel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRSh/BhqqZ7JE3tkGrhDcQiFEcA2uV+MwNPHpljaRNnAiAbaYFo0QdvhmnWRItRODVfLlX9oJBUCQiJ1MwiFTU7eA=="}]},"_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-tab_0.20.0-canary.cbe9fc12.0_1607022451710_0.03216162355636043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.9755be10.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","@material/mwc-tab-indicator":"0.20.0-canary.9755be10.0","@material/tab":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.9755be10.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c67tryvH62rbfdYduw3PYfcVPeCPO9Xr7vlK1h4djbloTtu5nOkjddguTCCC6jqYI7FhjQKa93luhsqcNLbzHQ==","shasum":"5da6c6d0fa517bb664e429683bcb3eb5f36a863b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuuCRA9TVsSAnZWagAAOSgP/iJLdtxKi4cmLwO86ETf\nsq8m+rdHdzaNbT1RRjsZ/71hZKaRiRQtEa+7dzPTpoEduJPt/f1nk5R/RYQH\nztqW6Pd1nJWkTJKflgum0zoxmXZL+JyqgzoCYN0jl3wYirtBbPLNQak2L9EP\ntqEztH6fS98zfiJf/C04G7CwbyrGf6EORlhudOOSdVMIn9M8OaRsDErCCcED\n8MECWeZsqCFjw8kYVTXoz2ar2Hbtdl8GdO58LbaMmxYBo9tBgk+lktLBIj0J\nDAt1HiGdpaE2aKlYi046notL3BePGqvTRGDa09pGd4Xf7Rgf6wNsAE6ATiO5\nS5ADMEFGfE/3KYoDXF+JJIMglQkPFZkM4Q+lfwpBz5AT/DZV4OJCcrDyQy8W\nzTry0j5nHBWZiK6dbClzLAyvBSjOpHlhpWeB7+GAf+D3GkXBVCujaPQ9v1n8\n/9lcWptG/GDyUSEwM8Dn1brPFEm22Ha75V+Q18l+lig0p9jdpbSG+zRbjtil\n4AifDXblPE/LTLjkFc+f1YJ0CJY3fI8wsI0wOx70d0dfpvbH0bYlvH3bmFDi\n7yUQWqzuyYKizNuwsIVrNmCCNmyKDFpNGAH5eJsHPS+LuNNNBu64DparAppd\nY08Z5+nxsLJ3YUHJWuU1KfuwMQZs7nhY8BVK25KwHPuqx5246lfs2tmwiwu2\nfbMU\r\n=WbSZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdFUAggwRnfvIc6GpNi/wk51I/spMqCHUKoR+PboKA/AiEA2NcdOp2m89dlBZhgRFMbEC7E17K5JuwPUQEhKnF5Cuw="}]},"_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-tab_0.20.0-canary.9755be10.0_1607023534109_0.6840843074517808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-tab","version":"0.20.0-canary.3f64270c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","@material/mwc-tab-indicator":"0.20.0-canary.3f64270c.0","@material/tab":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.20.0-canary.3f64270c.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QuKGIxpLj6P0d03mCSpDKurmtwegVMrEjRmxOSjND+63QkH1l6D0I71talnjJi7nlDntztWXqRCcjoJgYI2NMQ==","shasum":"740db5e158ece1160ee09c0f31c30c19b8682ed8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2MCRA9TVsSAnZWagAA3W4QAJicohsFNJDauT/1pUJV\nNeYzO3ghgMvEfTnYEhXnKaaMdoeciIvGHa10e9rG8lXLsqx1ZyoaT04P7ivg\nlpETBOdPYASDzLu2WZZ9hvDXvr0+UdnTBeUkQiBJyRP0Egpz9C2rXY3g7OH6\nc7SOrf+gIOlRs7KceI+n492uz/rXRhPuOaEx555HcgPNtDe1l6MC0jr4j5O8\nplKWVRDNiOm9+9AtoZg0QGNTPVRyXUoCcsHZKuTxDsR6V+kXcDzZcCH8o22+\nHMsd15ZLWg0Hhd5uP7alVkFsFmyKCUDfmU8A7JLS/LeJO95OoUnR1GhuyDyT\n2x6vFTVX0/uZOtVHejn4gJS4kBqo6hoBMbk85ksIw5pD7h2XnRa2r2/jLxfv\n65vfu4qqWtvaOzJwMwcBQbWnKqC+lvUvNm2HgDICQ5Uci1qkXp3IrouSV16i\nSaw6HKocGhr0//g1asfmI2gSqt+EaWZuvxWxns/Fo1RjPOlZ+VCEGPMYn9xf\nQxD20PagfEERz5B+EInB7SxL3yttY3XUFATA4t/r/YGXDFSxW3LWSHzQGFY3\nNZqkdqb7gXK/8tAYAKGQWn71NpMSB2Exgkhk4HZRInqaATObRlt+Ar1otON3\nnbMl6mpfdLaZNxsMcNObgOi9YUOa2ZBYsVAAVXyP070Mr1fPFRhtabw+ebWv\nqjEu\r\n=q3je\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjX7vITy2EQl8bNVpUjSgxU+aLTsZWs3z1MTZlvIubiQIhAMR9NlnrNBfFtOc0o3witueRdv/M8+Kxbo7eL3YglhdD"}]},"_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-tab_0.20.0-canary.3f64270c.0_1607032204484_0.11100215216776488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.d893b14a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","@material/mwc-tab-indicator":"0.21.0-canary.d893b14a.0","@material/tab":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.d893b14a.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZHBgIFMdDQbODnl1wVW9gVZiHJpYY2pwEZuH5pO1lqmeWS726uJ35nAuu4IRO+g2A1hPJluADDfIzP2EEb4nPQ==","shasum":"52e6a3a4329f89738a2a19987a94b969f294e82b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYKCRA9TVsSAnZWagAAWEcP/2Z6w0iBVom2MsenXAtt\nDV1THJqHj2shPPb+34PD4hIJxcVXSZOuY5D7bo8WrEk6IqD6HaEvbKlz4e4b\n97SG4p5m1r87wn8kr9oOnWMGhd16mMTie9ew41+qw7/PV2Ud8FPTL1IcxhU4\n0qiKZVctbwv+4cQGWQtyKlFTX2s5+RdaXgRsL47rOLg1pNQJ3lFbRgf8EskP\n6NZTUB5oHafZVdj3vKUUS6X7GrCDoC7kbP+nDhdwvl7kYbZtLcyne8cDwvsm\nWg92thfV1OM6tK5IP7tpZtPnXiLsiVOC8AawIIm8G9yCLx+/CvPc0GBOYMsX\nFQT4DV1MimNDpmioU7d4aqSWJNVc/D0cY1m4aIxQTDp/2b8BdO3P8Pwf+cDu\nZFuMFRnZZtk0OExWZLg87RiXlc8OquA8tlVD9sW4WYtlYUN2oGH6bviz+tlr\nF1uTOpumCb/ADsn07cPLz1W6O3dUm1z95STLlF70yRNcFod67HM4PXi1cHpR\nzxwyzf/bio2TYqQAhCEecarhSSakkBOykBitt5sleyZcCqlsizHpvhESJ+HB\nOFmuNvR9+1de18ejydAHUoBZ45apPERYdxzxxc6BWf4ZV97Is42I31IgeNDF\nDWTBtc9/eP22ntdvN/9Aq+xD1DE7ogX9SesxWWQTgC3BqpBxLzo7rYiPxOrY\nN777\r\n=huuM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2Bq/UQVMwAzzBx8WN/C1B/yRHxEx2dQ+VwwtYv5A2QAIhANPrWdNwhC1/mDh0mWiWBZad3oeZrVNVfLCMwKqO6HEf"}]},"_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-tab_0.21.0-canary.d893b14a.0_1607034378135_0.34729074879465305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-tab","version":"0.20.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/mwc-ripple":"^0.20.0","@material/mwc-tab-indicator":"^0.20.0","@material/tab":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.20.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-zGHnns1Gj91sucs9GLyN9kSqstWmaKpqeQCAcu98B7D6rI4dZKYgudrwnUUZiu1xqrsWhZy2rSbe8tu075ENVQ==","shasum":"a3445601dab27880e568dc5706738a6517082838","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.20.0.tgz","fileCount":13,"unpackedSize":65604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWapCRA9TVsSAnZWagAAK8QQAKRq1tOwVe9huezaRIP/\nXhbPaW93R5nNkOLeMc4PeVyHIpJpiEBmNlBqL8xdUhFG3X1DiIKBVG2FKDCI\n60ZKfgVJBX5KG8RKq2OOEpLph7JOFddBA18q1IcfaYuUjBL/SqAzTjSdmQiB\nzXmApqyIuNe92P4HvIL3Rv5+WVIEALaJBmaocuEVk1bLS4L98aI8avm3pnuy\n+UERGmOXCeXQBSwzIUzcc406Y0aTuQ6XjCxe//pA32wZ1iGUgcVUc2JCOpg5\nxEl13u0C4zx3y6dubRWI2EwxOIXdFMTkEieswnmyx5vjbXTXyJFLdHxR3g02\nYWGXA/vA8nmcHR/vlIjZl6Gy3vgv5oB82Tjwxe2fF6f3rMOPjokoaZ8zJ08V\ndsd6HCB0HYAMaV0/sBf7YquGWif0mVcOMmv6Cp6Ci/Nyrq4d8dQwJQtDUR70\nxLCrfdi3+aYW/GYjbGx8qY0JNTFMINYCyute3VSjRFpw3PcP7ovUY/+UtGTw\nrAf4c/xU5A+HpJu3cjfYo8OQY/R/nvppC9PjxpC2jsIUPSW1joAnszBdW2gN\nEmQ4Z+Hxp7kU0bXvR9jlwY3HXUaD8/PSozjRMS2o6vSW+TenIqV+ol0tvnTj\ng0/vugzjVeqQKCAR2BUSo29GRZasn7M8/AUlxd+ddQetkkXsDnsuqZVoPE5y\nS4ct\r\n=7kOZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5spWPnYaBpQMbXVbnkyb6dmWsD2lGUxxj+z5r7vUZcgIgJ4d96iNVMaL0PfXps1+JUvTsRQk2x780uaLhPmAyqNo="}]},"_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-tab_0.20.0_1607034536987_0.7899177192305853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","@material/mwc-tab-indicator":"0.21.0-canary.47c7d7e5.0","@material/tab":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.47c7d7e5.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Xxa1Z44K247p0Pt2zWchkspoNIwkSHSWNBds8tIXanEBcGtJyVxOvemnWKYKOoOAuGt/1vbq5KiAuJ+mHn+HRw==","shasum":"ebdbdd885c42bd6a228d6c04cb9b057a536a4fc6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088SCRA9TVsSAnZWagAAPhUP+QDivYKRAF1ct97uLbrd\nL1dgdge87tmTJBU/3VI+q0mxkJ6/ax+Mlegfj2gRBjsg9Roa63vVZXoVmV82\nVLcg7zryZKFTHphn6uY0voJ31ubd0EntG+kEkISrihJLIylwPYxblfxtNN4V\n134iT/caE71FYBhhTeqEdMs7qXU/Gf/D6yhr/p3Xkx8b7DwdWfrS0Ous5cB1\nqaNUHfiyesWUz0M3boX4SnopP4D4Wq+rIuPXXRb0MWDV/oAzFP4Y5JRtJjD0\nM734+ZqqONWJ3uawJb3/DlZGqV6eMdE/3vfSG9LdYFG5TB65TKNd1xKAmdPa\nK5gMr69M5N/mEOHP6Tk9cEOIZjD2HGDMqysD+ndumsqoJD+UFvIBXRlmyh7w\nk/qOJO7M0FVHKY8amxoy8vlhh12E01asTTppbL0cW4zEllcwMALmI4uYN7d+\nSrQyzaXZAZDXp62P2K4hg5QrHiXnh5dQaPlU15JrMbV6DekDlsfJ93WyUBIV\nS18ZG3e98p8DQxSorS9xaBA2zNcYDO7fec4jLbb6yADX5w/GVgR1DM+TF90c\nU02rnw4LalnAZv5fF1BwGdmiVg6b+Z9JqDYANjEvEa92Binx7b1ANdurYOrg\n41p/M4siRZJ4I5ZD7sNvfbhPR9HeP0+N3xXIWVaqc6aaD75jWFaJbYYRFDLA\nWmTq\r\n=9aY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhHIJeiVWh7jJYI4Nw2e/gaz+GyOzDjOFLiWVxwe/2tAiAobWpvEFFKGcVq1TyJbwkLIZAM9QtB2Zf53oEqEVkZ4Q=="}]},"_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-tab_0.21.0-canary.47c7d7e5.0_1607716626341_0.22084593119813967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b304a78b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","@material/mwc-tab-indicator":"0.21.0-canary.b304a78b.0","@material/tab":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b304a78b.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WZCHSTP8AWuNW3OsqK5wIjLdmQiYaJluqZQolHZsZtP4+iQ9gyavgbJIW4j9Lsq8RG1v0pkJdqLs+ebLt16/Kg==","shasum":"e4da84b6a9354b01b2c75081865a93c6efe331e9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbHCRA9TVsSAnZWagAAInwQAIYBpkl9uUxsYa7DUDku\nkU1ZzMrDxtr53rJO9Ml7CCAU/kMzN6+FnUzbcecIUGBjJ3ki7G+JkwhbXUj2\nYcb/j9aj53Mz35J7scX4WEfpqR8+2eQ3BC1GTaHn0J+82taJwCTT2bfJ71AH\ncoSloZ2CLUjzflZm5gb9LRRVh8rZuHJfMLl1muRRNM7BhK7LohRMne+18yn8\n71OdZ0kM3EyTxYpsPcbDy2vceRXR7sKG20MAv78Lb0RBUyfM5NeYca/MLv/3\n9ZrLeoxVwPvmTmRbus7Qm6pEHbbeK4vmqXLddCXOvh9kBsBIOcbrwYhsvr0J\nioLGOPZYa08cTK+BQS+y9QFCZHLPMtwbkRwQxwraPYncHlprCELMDKURQlz+\nWOCKY2tUtvmaPX+jXY9KRkic76j19gPS0vtH25z6lPMsVJC/+mY823wm45Dq\ng92rdJk4oVXq59lhp/FeGahT/QO3IGQ3Opx1v14ajEY/xuHeIxwG2Jf3kc3r\nCJi+v/8JxKQaHWnu0UC3ZtnnHXVcmDWu152wlEKwZVRUvKJkPAY9WZjxQNTw\nMnfx+3tFULeHPceQtWFft99s3d1Mq++MZAOd4ZzYY2s4VzTi+nIbrFliNaCL\nWXj/IpuUj5oFDeageU1mQEPTLIcvD5eQ1yjHf3j96qiW6JMisR996w1hn2Ru\nQXDm\r\n=o5Uk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDE/EqJPzNlLH2eM6acR/FThy3xn7Wp7cHTvhv16FVR6AiEAoJPStD3iNwMdxnzw83sCRv5EfxWfWHAx27RN09QNM0M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b304a78b.0_1608062663491_0.5199823325147026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.777c5fa4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","@material/mwc-tab-indicator":"0.21.0-canary.777c5fa4.0","@material/tab":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.777c5fa4.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EL5uVJlBQ4a7Eh2W5zriDmZiedCSwus1ZVimx8pAkYLd1JMxZHXrbF4nbU9Gn1ivKaowyGxYOyEiKYNzeL5cow==","shasum":"21c009e66e54732905c1edcb89163a8e1a9c1356","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIHCRA9TVsSAnZWagAACTMP/1AfESLIPzw8F2CYXgDg\nynHRg4D/lPY1KzyGFdXQWZdeuRHm7mFE/mQpU6xXPIpn71zPwjQcmxfgw8Yx\nUjsQX9wcwILKJnL2ATcQzkEk4ssLcDwvMl5AfxWIuopT8ujnE/i59KRRiBxg\nLbSW5SnFemL6vUgvmxgC2Exuim1UN+bNVE3WTCO7hbHKIBTs9MTJRysC6i+m\nYk1M+CSI4mMTCXaf1A0Xsue62zydoSvM/OTQ9f/HpEpncW5t6hPYvgN1es13\nfJheJ9MA+AdD3949O0keeMd3nP4/ZnpCj3hMLyTMY58AfFGbX6sKhItWx3Pw\nrVtRppBapVthGJt791hy3CX6A+TbHE2e/KhbF960kecDPpRBKl+i11fGNoY3\n2kkVAbuHQtz6hd9O8h87qrAXEMAX//wCum6ayXj8SCH+4+NKaE/vLbYR3qb8\nu8RnMDr2uWuE6SBgCl05IJTOd4sb4pdzmRbG6dlQvmXifahaRaLyqTvSFLCa\nhGQWctiBthXxcX+WpT7/XE6sEHtuBiUXEiatTHtHH7cx+yDcb7s0xla5OpeL\nVISHYlhcMjigWeT7rpCXT/QRdaL/+B5GWYHzVOEn8JCPOLNE4oM3BEnzEjq1\nsl13fmFJHg37Jde2qsqXZZMnDKnni5i8SUrH5UY8DMwXgjF9pxGZ9yp0WUHp\nU83i\r\n=g4xm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2mCXX7oTJ7dPowLB6P4qIlk7+zFi6lWmIdDJeKzJUUQIhAP15PSkeynfpAgiDS3qV22iqNTOxETglQtFToqwcNW8+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.777c5fa4.0_1608155654822_0.05526265969227273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.635c7996.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","@material/mwc-tab-indicator":"0.21.0-canary.635c7996.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.635c7996.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QePrqI9TNSEWXMs3S0bTnuBsU/JPGo3PZ+//5dqrVb/FMmtNPo2wEwGuS9q45OCMLPbSsjXjmDilgxQcG/PTzw==","shasum":"435669cccfc2246cbf3269322ce3a18cce7fda6f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+p1CRA9TVsSAnZWagAAOq8P/jPgtW3KlCaSG9MhAywo\noeSRhIMDxavYG0mmEazlSwtkt6HPEj6GJz0cGdGhEt1x6SJuJ+3nBYh6sOpq\n9VyczF5fLHtUptP6edJTlTmaLWzeX0KmmyWoD6AjKzA5GE71tPSjZG7KbguW\nPuOdZ2+SNOkQKPMy0YZEERhtkHPgYgf5+kebecs4zAdJvGaj2pPCnSpVmOGh\nWzkklq837FIeTzHQF8RC7hYeFDlWZhAkNhdWMEn5/Qay9YpLDD1nP64581VU\nVyMSe5Y8f5vKIr4z3BNWk0+mS4Jfzjv5Wp804Sjh0Ay+ADLdfDFmUOS1E804\noKpVlJPZ7QfOApo7B18hNi2RlgqdU6SIw5xIR/MKBim1OvdaxOmNnTlHflpE\n2Sx7rrFIJ3i+5leY/L30JhJlagrPAtMP6PevH+8CZxvUVWdaMvEMjjihW8jE\nft3f5H7IuvXX0vRACSUY83IbNFqoUqoepd1awSJPtSyXWdRuMAuSnMP6hQqd\nwUSHIOKeO20EeiQDTXA/8rClnQvlqmjav8ueZoQT4qdAp3v9yscEtt6DAQtk\nshWcSPS4Pyav+KVDMwy6KjUcTYeZupNYbYW5tObf1DDAPTDHfAuDzljx7L5M\nYxjbQsPJ6oETspcUUlmIhS689g8VkA8IFM5r922uXXmEJMTwnPqUqraiprSl\nkerj\r\n=0OUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkWH+sliJNDPPcyPcjGgLRirjmkGR/zch71fpsZT6bFAIgRbv01GJPjD4wPu0/++SoveI35uw1PgKISQEx9tXQ/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-tab_0.21.0-canary.635c7996.0_1608247925476_0.9069326891151446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.20b0045f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","@material/mwc-tab-indicator":"0.21.0-canary.20b0045f.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.20b0045f.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hnYi5khHS3z0hR5GBJBgpLqSDC9v1KRLH4aN7X0G7Xys46J3sWb757XjPiViG87tbR98EFYT5l05XFTJhOAsdw==","shasum":"c544d8e3029e28f24bcd661b4ecda6f6a024ccc6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+56CRA9TVsSAnZWagAAEhAP/RlQNMKLyaAajkLinmIU\nS/uCfBGHhuDE2daf/tKGEb+/ICTwGlDBnBeugmq9HUGLlsB34+3rldIaEIin\n3WgvJ9yRt+/hHLNsV32Hvc/85s6ag2PohcS2nKUC+0Oxu8ds6hKZS7pulptf\n5uUUNrCcLowR51t7gePUMABaFhCilVN1Uv2VLN9DZpQOH9hIKpRgq2/gAGFM\nSjRKzhd/GSjxxQCZ6JyF+PfWfJAkOHVDh+TLZb7zs60wZZjpl5RkqOSV6CPZ\nKJWxyoq29C7f9HWImjMtzpwnNfM0TIvU9KUKWNZL890BXNwqwa1VaWgVQp4L\njrEQ6VxlbZwy+cnImX4e3ugwksqgJpQkJ5GuuzyTXh08CbQCArT7cbfxLvsT\n8L4zszEGySs98t2jkJSNQrGbN5OcKkccCf4iResRPz7phM81peeA7Pwz6O3F\nrJuImISKO35zBIdxVcdnIj0Y9YC5TR9MqVdkTOoawcod7vPni7CAUuXGkHPR\nmP7ZK3RYztnu6XryYrR4J5I/pvcIFbhE6HxmElIxVB06vN3bUPVnu6wMTaCg\nLgYDtQxNS0LdETfQNrI31QXBLWJ8DV0BrWGdG7E77cVjnPLYbLf9V0i72xYw\n942X21vN8C5DJGbxkcVohWP/x/kjck8LRI0GL+AwzCmJiIbKE9F6Fi+0/mVy\nIVVR\r\n=7Kiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKAxyA3rC0hyYF8oxdzRcnpxVROkTqdQouLjpCcJHyhAiAn5naU8qEz8JcBJJL5CJPm8ajOHZmMFDfGVrUfbVIObQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.20b0045f.0_1608248954293_0.5479100400199635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.41f77000.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","@material/mwc-tab-indicator":"0.21.0-canary.41f77000.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.41f77000.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7nLxtR3M15t3hBb95rNrvWgRsJ5fdKXXtuOS4I7M38kDf+0PFTLwYGKncnMdxmDRci5uVNPnH6kiLfBZ/R89QA==","shasum":"da9ce95675a40fb1ba7393bb2cf9dbcb970519c4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lPCRA9TVsSAnZWagAApRUP/39fXBJHlsqcxMmpgfn4\nqrN6k+LdtswCI/XMCfDeQztf6ZEEin4724QrcgeMrBNahu5+Qt+BT0+4Jpf5\nguAaynK4ddglZ/hMrHkRZwxG99wBkCPFYJU/Zgz00dbvYoL/9XeKUcKOatVf\nVUN5r2OV2GtkzRAH79GbrPlmDpTmqROO6i7qfRb7zAXG+4KQbPVWJ2rAO7uf\nP8bXcVjpxe5W72LwePq9Rs3iXqALlqvfpx+UePChcS+QKp366VcmGMP6I/tm\n+t+zrywzkkrKEEwoNF7Va37ekRjaWeeS+bojY+4DFhh8gPYcSV5YiHr0YfIU\njRhw+xqpkfbPeutBgOn155ZPkgOADfQawi3fZYiDlTJ80YnV5szPQ1inZCvR\nqzSBhT/viFud/0n5nhDn/Ib7GncK4MC3xYRK7pVmIIwB2NsOtZZH/Cv56Dcv\nDQQ0rB8VTE1cJMMTHRdx0ki2m9QwXCLexkPydI8gVhxevreQkTmjHp3Sa+Ck\nW3KmA8GPtpFjtlPZKaScmZVS3kB4bAC+Cu+/KL/8TcDRcUflQE6AASdIki2f\nCYguUYQcnHdSJcoGzNJEwz1U2/7fSEdIMYp611zqeAfhOb1fmRt2Nnd6SxNP\nNrTXa9NUkjMpSi/jN3uXrXOHrdVbgsowKyS4Vj40y6+Kf+MLKLhjiNpORkSv\ntnxH\r\n=51Q8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkkcP/sJOucSyqmOwnsxwslh1Ic9Y5Q4NWFfN1BRybQAiBa0NamNJIJ6ZuzYBLXSdWaTrjtf48ukrNipW7+oUALLQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.41f77000.0_1608251727506_0.2615673963518792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.afe4079a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","@material/mwc-tab-indicator":"0.21.0-canary.afe4079a.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.afe4079a.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DGxMy/Hcvxt6utud8yWvJB4xfZoRixdPkWLVhXOX2HRv8p85r+hD5rJHdxsws0MajOG3OBfCTdRPG0VQF0wGcw==","shasum":"22b6bb908b793c8f6d32f8561e5983a3ff25709f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":65690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9zCRA9TVsSAnZWagAAMHcP/2PcTau04S/hOFP5orS7\ndc/BkXSG2Yn6/951kPLhDHGB7Bi4GcJ3bgyMk6XZ06Gi6lDPCB4lHlki8l6C\n1xmF5nExvEuvKDR/5eCBmy2ptT5VzMowmroOXKA9OGj/hvoubUQf/duDYqam\nt0TS+6eW0WhAa0zRxVEnRr/alqTfluemxfB10UItDhDYjPhrO1wi7y6iy9/u\n8YcvY9As6XZ5qEAxzSj90lb0zr/QUwqVBVwgiIZYvHNP4RCgrUCHg5IqZR/+\nij8lf6CUi5Ebt49KNF1jfvvxjwZaBepbBBcRuHjrya6boL6fJf0xvhXzw0F0\ndlF80oH6UZCrQ/KjcT3hOLlf1cqzd8PvcgaFL+9Hvas03ej9K339D6+auH3o\niqewy5D5QCZAzcD6WwJJOE97XCraazRopVuagdiX3wbutPUDQSfoHPREBMo+\nx3YM+numq3VG5uS/Rs2t+7aSq31WmmsMD9Ob5+wpHxtCXn3Jv76/ZpDnkQp0\n96wMp0eXWMTdV3eXQDuowl/lfjJkeMBAPvu2X+YTvFFkJwE9Jc1DmryLaK7X\nRmbUkUvA8M68558eZ0ddyHEYVsLMrcvKj97QZ6JfTE05cgpIrglfBl9cuQV8\n07Ln7hcbuo/eUSKN/7zsER7x6CwdhKg5liYnrjm+XS/h24cIyGgPu+y3nxMe\nhNk3\r\n=CgwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1FypklcoZn0aWi+rXe9qtgvy/EeDo8attwW0cG2/k9QIhAPi4lHAg9JK8YLKn5bAKeQOycRktpQN+pjRAYp6JNU3Q"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.afe4079a.0_1608658803219_0.9530375668899367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.407ef8f9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","@material/mwc-tab-indicator":"0.21.0-canary.407ef8f9.0","@material/tab":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.407ef8f9.0","@material/ripple":"=10.0.0-canary.671d72d95.0","@material/rtl":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rYfx52Z8ss3QjfxEowrRsaNkGihrjcdzkNoBIPD0PKdi2oL2oTeZcMKh8rnV6eJHn+S+JsVrFXfeCmnnNRNVqw==","shasum":"912804bf5a11eda34036020bc26d36a68c7491c8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcfCRA9TVsSAnZWagAAOGoP/2xCfZDdNQ5uEyxCv0EB\nQUMxmYGjr5UOLZHD4JaJbC8grTc8vyDYFhB/UKjL/ZH6qj/GViJGwYFNH+e0\naEDsmuVOFOW01P0FVLTd8UpvXgdbLW0Ex3umaCOy7E3oq8r509YQGsmsciJt\n3T06Rq7VcAbbMUxHNyMClIQ3DFR75WC9x0RxrH1asfJHnhgqe8yonlaJ9kGq\nLkRAPkOnwbeFAWDiwnlO+3aCocIIB46i+lo1EO4s9Iz7MQJ41yXPdc5Bk9X3\ne+kTsPGXHqrbIvc1DapE1xO/2OsqB2IRZ7hwv/t9CJEGUguxQcfIpBbY3zDf\n5KDgZ0ST48PS7eg3wVOvmbcpuRlmaxrTyv/IHfmCjpfa3yIly0oHwVQj8gwd\nYVX3x5pQ16HlvVPJwHX3IXoR1MyGZn4m7ZdrZTR/LW63nSr9VkbI3GgTetD1\naE/0yuEXWwXkTnXUPYw6UXNnuqF0f8jgSfghQGzUCjh9ICQcqS/XDPk41OZB\n9SXgkkhL4RcFUsZPk+ZYlV0txphFFrKLcPlBexWttia5aqGE0qc1zOMvIBhr\nt5Pb6mXff9HAGneB5PeFynVv8BcKxpk0HS2v+ffYXdqvuHTT2MUsoopevw1I\nXMx5cvmiCSHj2TP6BtE0845kJdWKPErDPveTDHzmddiMCsNkJMczmtvIUcpt\n3OXC\r\n=SVrW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGdJfeC8SGAiGSNMTF1F+UvhGqv/1REAk6+XQrnj8CAAiEAlfUcaeHPPZ27tKsXNmW7MmIpJ96iqqw9vmVdjPr700M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.407ef8f9.0_1609369375290_0.13457917254326435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2e26e137.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","@material/mwc-tab-indicator":"0.21.0-canary.2e26e137.0","@material/tab":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2e26e137.0","@material/ripple":"=10.0.0-canary.365c69360.0","@material/rtl":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BVh1mLAbTqqiyzjEQeKV8Ryepjz7PnJpxWMD7WF1HcMClbFHC6HcFw5vuagElS6hPKkq4xIj8SBteK5Q30Lk5w==","shasum":"5621fb498743d62e7f14b983a65513bfed89ef59","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTQCRA9TVsSAnZWagAA9qMP/AtfHTLwKntyoHcNy9xW\nbQkWNV9auJvyTdN2pICZwrt8ji88If78Hn9A2mEMo+n2V3MGKl/4kAvYfagi\nZoOzjJxglKEVJKKC2fUSG/D/hThE3SJJagHxFVxXRt5n+HRLxwiTlZYVXxMv\n7RcbIl4/LqZKC4w+PsbmHBuepnEgkfYoOQzaCYJ6PvUqTCE4l3oY0h+oigxy\nD3C2EKnRnr7YMmaaoGI5HpcFQfDh7ik/is6O2LafT4K8WRIfUOR+H0calnLZ\nwFZmQBCQRWcAN0kqPfu+9v3MPsYSCPF5AHjvavos588itaIdmrv6vRXzqT+6\n/+Fz2GylD0ZlW02tcGejU4moXlVAzULn6MOS0/c2aLFw5IMlT7jcmn+M4Sjr\nZeQCxZj0UYJZqIyWG+eQ+RpQt1WG1M1EbTlKI+/aZF5xhX9YkS8udoj0anCm\nDrKGjnWt/RmyapgNUEbBjDf0AixJn61hGQOvl+7ovpo7lo2CyHbLAHXyHD7k\njht9rYKCdkcmiSq1Aq0VAGvHVDysA1Td2xc8k6FATHF33vHRLNJuNzSxx6hW\nVC7yEGBE5BXf1DeJs+R3seHZcu4sCn43WhKRHR2b1j3+q+UVnhchZ78v1afB\niO1MYSPd/5VHT03pR5fU7cEH6SHjFfnDI5KMKr6dtnIPX4o7O4KoPsIgi1NR\ngFLH\r\n=WJtA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLH7z0ztPAn2AIq1kvY2s1/TZ4agxTnKErbx1V/o9ZbgIhAPbxCrV1MB7wfTbqcccSuUR5Qm4ZQKCRmcHe8WO4EIyI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2e26e137.0_1609872592139_0.9304433693792127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.9009f6c1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","@material/mwc-tab-indicator":"0.21.0-canary.9009f6c1.0","@material/tab":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.9009f6c1.0","@material/ripple":"=10.0.0-canary.abdd10065.0","@material/rtl":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/Cdh0+NlNlmWsvHF5leY5eTnk+FwIssCIpxCpQuDAd1/NvtOZ4hqIa9iLU5hBayoMBhapYpqF8EUOTP/818cyQ==","shasum":"7bc78868a48ccab50dd6fa2d37e08e988d275652","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Lh7CRA9TVsSAnZWagAA/f4QAIFK2nPoTnD1g+RG2orv\nPvd6ERzWRyCkw1oYTMfS/3llYiZwaGNU4KKYiIVpnwqG52EtbIyNjhyLHBWw\nH/f33f4vJu5Hlo6biumQS3ZF7WbvZ/YRiUDkWiY/ivctKOzX7VdwZqhLLMJp\nSgSNqILC1wklXDWKvuk45R+WvCNUJUEwDTG6U49Mu0/O5I2JksQ2X+g74M3T\nfM4DydEQ01Pp0ZGNfiWI4xTwzi/mr4QPixsg5B9eFepcoQsn8+4d8wQFpSmS\nW3VoKCZAyNPtiDKmDjGDbzDqZnDXEpuHu6blE9JWH0oh0CxnsskSeUUwm0N1\nX7DtJypN/jxObHZbPF3c5RaBqWj92HDht0w//XlgSdnysA4B4WMCxYE3gJpQ\n9wyv+ifot2hs9aaMXkmcBA8uOBPLW6tGreTjiFrYv4MVWMslwOXdRwUCV7Ol\nyEha+hM3mp6xDXelSI9LTuFsROP5EzYywjM4O/EUNuRxEFLgS3Hwqo+L76J+\nJGXDfB3lodmWham1tGrcYAEGXHCq6LK8K1c8MbB2i6/PhbYE7YNQhbe5HaZ3\nD/uarcGFWIlQw8t/l02d8T8jy0W6mo9EQl+A9mvX2GF0qv1yiAQ934VwjmzA\nCNl/ZjhyfU8LGDSsSJP2b2usMc14hoZWnxN2p51usr1/P9FJXgkC4Z0e16KY\nk4PA\r\n=F3rH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCkuQ674rT1+aIwlNnONBxCWMdI5QzxKRY2cBSeshy2fwIfWhKAS8GG3mqM/XIbePxPrd0mHbxCyr1+WIMOEYVsTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.9009f6c1.0_1610135675421_0.3133613321707365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.ee99b646.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","@material/mwc-tab-indicator":"0.21.0-canary.ee99b646.0","@material/tab":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.ee99b646.0","@material/ripple":"=10.0.0-canary.b8a1a58e4.0","@material/rtl":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-M1UVuEqudTbdEw24gFcY872B+96Z6G8FcQZgCXTemFPXCPvbOg5dXJZaRiJeFzB+oV3sMlV6HlW7crbcsEVdlQ==","shasum":"f70328a166d7cfd70ed56ba93badf22ea10a64f6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NprCRA9TVsSAnZWagAAVvUP/iXSFuDVoFCfSFDC6ndg\nsY1r3pU+7vM3jGG2ptIDH1k5BQFYHiuwy6TnHP5NUJBJ4E/q+wcQ362/wEtF\n+DMDp3FLcTQ9iR/5CPUxg1bEO4rnDyXG6UKLUrQzoLP91yIqcsp8srCY/nJr\nSM/tJ0vzYN01X2IZjzErkbV18Mki6zc1H035/VYzTGQAVMT0Ad3Ox32jCakw\no1PrPr3eD15JotTRDaRLLV4UzoFA547H+sJWN7db+qjcvBOq0++b2mc0KqOd\nuir6Z1WClROUmcTwGWKf6kWhUDbpItNw9u+rAto7/Nt0Of/x/i1h32xxd2Lf\nmn1eSkyk6lnpLmx3zO2qIcPAmr1rFRHEKEu10BH35Edwt+/sz/0sU+XAV3A9\nwmlb8dKL8mqlyt3TWRiJUq6eujKBRBTvRHe06lLUi98YYvDPS8NIlSxxK2A1\nwSRtuoTQkvGDPM1Xe+D8bm366sNzIkIcEPiT0WL7ckZ7DtsNLPosTjBIqv8Z\nwuVOClNR3ZBMTF3UgCftReD7OjiIvomEzHpXaBB+VUOXaVwe/v4BHxZDcDvT\nWLf07LdFgQrcUDenVt53+RM3YfHFE1WyIs33aP5VbXe8JUt9Sze9dXffvFKO\nD4bolz1mKxy4LIJZhef62rpNOGhOcOkixSn7OsRZktKryqKZuraPvcHf1LMk\nJgyJ\r\n=zb+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY+XWuWp8dlh9B/InLt41RVaSb70ITPOnpG0BjWK4ckAiEAi/l2K0naKc1ENqjRsbaEH/j0FEuH9lwANVO2mRBQs3E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.ee99b646.0_1610406507104_0.8529272041514775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.740ed33b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","@material/mwc-tab-indicator":"0.21.0-canary.740ed33b.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.740ed33b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-A8VcDZzPOnCOVQpJqGWV0EjyxMxJMYoO8clcaHJLlrYYFUn2UcnmCyoiW9KFwV8lggRsVrmbUyWroPb2ibCksw==","shasum":"b033720b3f9f4ac91425acd5a086bbc8ede5058a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSnCRA9TVsSAnZWagAAL1cP/33zVkPAoFOpNcIJKqBq\n+HxptDxB3wvTWOTn+EoloJacO0/iaQqjUS2o78kPPIt7edq8Ahgl3HlRNC2f\nwuvXOgr4Bocc0rgRRV/uX5+jtePY+y8iJSneluj7zbEv10hD9euK7tNGmdhl\nqZqb3bfNlj0NJlEgsONd2Zm8MwSLk/5QkhAo8SMGm1sVlE9q7Ag3jReMig35\nmKtPN9qu4/98Kp5n2hvfLoAZH82smuyZG6R+crmdqmNh1qPMF5MCjgY8wmsV\n0wOzfVc9rfv5y3nEd7605ZSRSp4zwYni0eLeSvNwoylbTLLavUQKYrPDNJqZ\nOdexK33IWKBe0yxqJJm24JtJLfQl/WbvLRmDRr33+PjAh/tB1Ym8I0DrlIcH\n31GpPzXK9QnSNKlAQMF68rwXLjlTvvlTa1I7Vfw4qwb7m+aw7w46S8Hfzd9q\nb0WrscXmXv7ax6g8stiGouvf0Lqkxb8Yc/1fnI/OqUTshBCP28lx/alTcO8s\nUVhXt3rS/Ccp8b5UyF/7ROJDxgd2t7D7xDcMw1/4MbJsHWn0vGLWEKkf/g3M\nHdIcPfZOhbhwT5YPMAQwvuCI4gjEpI6S0BQ4ITiPwmQYxN1drpBVCQsSdyo1\nGr2onmrTpNkdeueavmk8DcNXKKaW8AcKBpup3f+VsfO6ATyhHGOw4Tiet6c5\nPy9F\r\n=h0QO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOqd/vfGQi+jvpzF6IuGTj22KWtoTBKysKoF1vJCa7UAiEA89QMX0SegPLT6y7H5PXM+Ue2Ch7w03BKxufFPlhy0/o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.740ed33b.0_1610474662337_0.833883110894496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c5c541b1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","@material/mwc-tab-indicator":"0.21.0-canary.c5c541b1.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c5c541b1.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dNN9vlGearjjfkWp41wK4f0l75Eb9prj5xwOH7lTpGXwPUIo4wRSNUiX62kYsCxGx6KTSonS3yqe/S4QkU8bVQ==","shasum":"f734a249f199b26c3fa1c1c87dd38fb0dbdd11c8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5ZCRA9TVsSAnZWagAAA74P+wbeGREWEHumPMFC9bDR\ni+7onzGoKy3WaKf1v/09QFSBhnpZRJbZuKdORyfbNIzZimkw78aPGEp6R34u\nYp094HTcx76oADC8+a75mEUgNPdmdRICr5O+gUFbtuZL4J92+TAvgmj8G7R8\nJ2fmMIyDCIVEoV/0fYrvAZAfJNSL3voSuxcVduUAYatbZ4HxbeOcoJ9U8vMs\ntPf3hZKrcUfYUOVKIU5HFjec45VqjLRlYt21Dhv9swhPpxjMlcMfuyHoq2CJ\n/nPlvo4sEeG7NuFRzh2ySS5f87LdzQPMGi2SWSHcBORHCYcAMHT/HJXEQsHT\nd7kD03teTsr/fCipOoR7BCbAf4Nh/9IlVzVz995isd71MQvWVeQklEgEjTt/\n+YS3It+KbgEK7zau69HlwbG/88/fQvtBd+3TRBJ0/HcLq1+Qu6nu3wZenVYT\nTGmBEJqMFZoMEo/7s6FkDKKhswn67C8l/e9AE7+9RmQ0XgMk4GApWuCezE45\nia+H1wkbOUNNq3eGaBqbULtX8G+eEmORg+8rhoCh5Gg1DqhFEa2pqC41Vf7y\nU4i4mCtfyY8My4wyjtcydoFnfxf5Wzk5vWioG9g9scnJTP5TP+Rnhnqy+14f\n15mbXIWniFgQ9cwBOcsci8XWVtPRh9KXdsbw7yKcw/RekFoj9zhjQr8F6KUn\nEfHx\r\n=HxMV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYzbb79yUOPWXIGSUEyARJGqzaNCiLV/w2tt9jwuj2zgIhALHxQxTkuORNilBVla+0dwrWlSgQ7PINul9RMyPpZXDL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c5c541b1.0_1610477145503_0.1821056073345304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.06fe9d90.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","@material/mwc-tab-indicator":"0.21.0-canary.06fe9d90.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.06fe9d90.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n+oub8Ebers9+h/OSbKTWRXdfqDIhU1JHaKtQnKp7AreXJTW8CCXsDY4wfJfyz1pIlWX7z1LXcGYH8uBI52ZGQ==","shasum":"79ece680e8eb972a215a541d557db403f46e5462","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gy0CRA9TVsSAnZWagAAPAEQAIql47nar1W/9sCTOT5M\nzx1WuEbJc+ljW8zx6NI1i2VWrmj8KJFAoI43lwNz9zvDWxDQxxAavzHC3/0D\nnUPiAzKTpyVscmmaP92582VQ6BCzFEowYSIIdpLj40gfjzXPcki3JltAoDnv\nqOTaa+rJZbzXHqrJ3+9lKgn49+9vKv/lS0TQtO9Mn42V7zZjDauwLTUrUE7x\n8CHi0NYggF5u+8AxCD/AnEAJkBW0DxGZk3zW8hYA+ggRz1y5/Xe/ghzg/0yg\npP65vG9ElbVmXqMX2AMUfufDeUcQhesp/htb0BFQFIXNme8KQvdG2diPZOh2\nhaCVAcV9rxplUvJeBYxSgmhKC9flGM6UuS3Lv+JsiAnL/Ldzb1DNnOBcc4Dj\nA5YTP3vMZfSq/TnywaEz+gkziy+D7fswFNl5sQ0Pu6N4/UaZGLhrED1WBUzS\nbVbQuOQq7kt2/FwkljIK/Hs3h4g/0YC0MMvTpjQSbv6xGU/8hFU03ThQpY7W\n2pMsfPkw8ZoJm93yqLJoL8uXB+VQv3t8oQeOd83uDp4IKH/P+o5vfd6/fwCM\nY1pu6LqRn5eqYn33RXKLWMsfPuxXlQfAxfssPY01CjKrwBz6T8atnSi/66Cp\nvtDZLsZ4/rgmMdKPQNuS7/+u41GnenoY9btDuL2gClMSrOKS9XKiY/rYKcF8\n/TFA\r\n=ydey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZFCC8G+JuDNwPUYg3ndVvmEOT76pbPmZg1nfqAjmOpAIgcZuRzCnzuAw9vVlF3judlb9agfRIwJAKZLePxuJdGc4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.06fe9d90.0_1610484915645_0.5315261474439132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.269eed01.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","@material/mwc-tab-indicator":"0.21.0-canary.269eed01.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.269eed01.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hip0/4AMtdZKctNrtJjGYJNYGk4rYdCObYgG/z00zPTjkvdh7GpDwmi3FqyLtkFq4ctctbQpE98Pb6dxg5TWMA==","shasum":"1c981cba0c1a4acae7744a4a57cdcb8aec7f1d6e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2n5CRA9TVsSAnZWagAA9i0QAIg6XnFZ6QYRFhyLP8+v\nLr0zPeWY9pai3kyyooF84ngphCIF75iaJ4Dx82FPWK9xrogorjjz2KICJ3Qy\nKhOO7XRIzn4f4oWfNqD7SZ1bMK6U2uSqcwiRPEOqN7T7LwA6K3CRg63ELM9X\neu1/vvc90xR3TLuGNPF8cZ+FbT1rfibEkmBvAQDnjTZ8gbvVMo6Xo4fnYvL/\nlKRO2/j+Vb769ceH4rE9FjImVA0uh3QXIZRd9MU3jG0i642vntCedgq9xYGT\nm8qB+hN0SiJ6vhIPhLO8o7Nl10kwC4J8c4rcYfQCFdtZ7IFt5Oc6E/viWrdW\n01Q85y2tFv6jllVbEn7IknxM99yBHGYrFVH1IpevlTXBr2H/Qk4Xi2/T94wU\nJajOgJf0ZE1R16n96Wg5g+f9ozT1UASrlXgvvL9eq+mNPmxaGQVF++KPMqiQ\nMilbMp53SwYuyhprHaEqsA0NeSmoAR6gtJxK3TgKOTU6LPEAVa8Rk0MpzjWK\nXx55R2HW1f20cHSjGc2LC1GAoVHHhGYeDfER7fDfXzjD4CxQ0fniNATSSPpV\nYG0wDGbZ57MhJttBT8XVgDFpsAtmWxQOCBGx/3gzNuhcQuJIEBwnwLw3w1uZ\n1wVR4jbMBZSvSV91wyyP+6tLSzMGi3qTbbtPzS3erQZP5nYroc1Edl3T7Uud\nxrJT\r\n=EvB6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiXavJ7bSrppOoREv3wmoDwkyFt6mjTexNjY/pIjAUYgIhAJJilREtyovZBtvy3Jo3BhU1jVJDJHZbNyhtUNPciX9T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.269eed01.0_1610574328955_0.23117909250700475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.8c075f35.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","@material/mwc-tab-indicator":"0.21.0-canary.8c075f35.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.8c075f35.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DvurHR3+6E8ogqcBcGJ8baxYZKkBd0Nl3jeAS0Ame2dwOXksx54g+JsGXjpuNl6AkTbivmDlaChdrUoRacbvjA==","shasum":"a241941e92e454b464e8423501c204cadcba2933","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30uCRA9TVsSAnZWagAA/EkP/0Xv0pHvOg3Opd4HSCAd\nQV4bH0YdtcO5fCr+orKmn/fVTa6JsAfICDY98pk6Gyrph1aYgUgEXrcZK7ws\nNFli/B1bRFOsqc0R0YdgfxAwCW8nuJTcKtlTLXO5ZyGlbbSoChQ2+rJIXHAF\n68XnIwnkxaEpTN8Rlzdjyn/Kiq2wXVbNP/20J9WPFBp21Ejtqq0D7WzqkxTL\n+pZhHQpdOOReltbbIdWV+ZNheNW+Szd+T2GksgpuHPav8u3Uc0c5t5bFGbhl\ndrPNwJGBTa5egeneZlVnh8ySc/0WA/2dHUTnPqQOqqqezSiFCdF0Q1DrLWxq\nJT/wUp2sgCenqyMoGPDgka7O/Px9Pokgc0pZ+FEOdlqyQE3lOae6LIiQ42gI\nuQIFop5k6Va6qZHckLcR8nU1gzFEpFa+HYSekF4eGtoS5oyKnT3dYFfHkcl9\n+6qilJmgj8QbRtshRCvSpA/eX6gGf2uYyHEo1pi4YsFVnORK7pbR1PKp1Xgi\nehHDCRlQ4yB/tKGCUE7FMLbq6zPRejfCQshg+Relwfw5u2nT1gz7+SNJ37QK\na9/11ZWiH5Ifp+r1MdGTKrfVZGHF1NOIMULZ5sJ0WsIdlYQ9JBWMhErq7036\nj0Cx5rA80DM0VJQ+guuR/1PkvLKtltS8XTQzA1T7O3F0EI25G1D5IF5n+f14\nMh8E\r\n=qqXp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH1AkCbK/ojfuSryWczRSoBcEZpOyXJeZMqS+qo1frIgIgDmH93aXT9KoLegMcR60qTuakJrtp2yM6BZZBLDB/4Hs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.8c075f35.0_1610579246374_0.895410067366095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.3cda381b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","@material/mwc-tab-indicator":"0.21.0-canary.3cda381b.0","@material/tab":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.3cda381b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c/h6FJkjW+EFc6NM4vxRD8QFuMRtN938tuxd2W/Q1c6TVVNpDC74H4O9VlztCvMjfBDo5uwz6ZaCI7C1CFNxOg==","shasum":"192ee934df88314c9db76a21b8837527b8ceb048","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qgCRA9TVsSAnZWagAA6DMQAITrOw79Xwbh3dGXJL9i\nQHHmOBbnD+3t+nUiBintjMFjNnNw3r9A+RnFVrk0Box45vi7x3Motyhgfqrz\nMkFOGqjZkGdMsIYSUhlRzxipziwF4RzatoLQy7DbR6qyuOjH/xS2YxwcSgXS\nm17l7EN1y7Ef114FUy/FFirJ0SE/Kt7yUkJn0QZdPtGnk1U8dA3T9NDLJ7tp\nqugiGs5r+IuHQhkHTBykd2aeEplXUW/ukOyxlDFhSgOQMzozkmQ9Lmo6I9Mu\nT2xWHQZBRshAvOjYiE+WJ444swLljpFLfU2QUvqaDDmZP72ZeM5yo2Idkz/P\nyRG1xRW0nsNxVjJ3IjFtQFaM1pyC5MqdzP3jPYYMT4h4xLujCQ6bsRK+PiOu\nQhoCY/X7TceWDbc0NDH44x0q626BX3fQb4t7+mIQXcWndtge3irwX+iqOkke\nBuVxocMbQyHa8oOrTksAI6E0KmdRWMWhQopCs8jwyWkgsCDAHc6HncGe0iMw\nIAJTd5W4KYTLje82gn2LlFTnuTEToUwKsOZNTqPbDkgeqJg9sVRa5tKYt3LU\n7xQ6YrNrumkJBA+0N3gEBhasSQa68uaZJh+OsZpCUo7VARyuXlQfITsg0tfy\nRa3eMY2rtA9pNwduTmST1EEesRgM4D5X3ebpJAddCOBWXAa9JvAvl0rsADVF\noVSu\r\n=+6or\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+2SBFkETtZWnVrvtJBMdrPTw6uOAMeOcWErO09NGqlAiEAy1+XptYpkMoUriA5PHJ75rqYTs+pKwEMZdZleWV1OBY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.3cda381b.0_1610582687953_0.742932344710199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.bc113605.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","@material/mwc-tab-indicator":"0.21.0-canary.bc113605.0","@material/tab":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.bc113605.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pCLHdsUVsZaEPjErCaayqHalGK4o2uEZ1kz4ccAqIuV5Mx1AySKn2TRsr5NvtAuL0hprNOobPt7kM2V2iggi7g==","shasum":"c435d81dda5323d68928f19fa09bb959f47d1aec","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5Q1CRA9TVsSAnZWagAAWPAP/iQvMGhrzAObtKT90cvc\nuOlq9TddQ5+79fhcgPErt/ZXSUgHVC3D/L/StEWFntDNhoN7N7WKsOv3LqfW\nWRJVdMGvdQwtrTHf/6+o0tmkiE5kzvQpKlKtVKl3n77xEr2tkY/i4PFHRfaw\nKOKtEBNNM2WxldwJxV4Zmwgfj323l1HsZrf6pry6mZXyjdk5Gx4TyOTF/B35\nNkA+4f0qLdl9rjnJWLXYTMx5tIbn0ArehdrQc8k7le9R0Kda9WHoqy7HxBUU\nENl0TwTswqnSqOfebOZIaxKzxUzUz30Pn2eg1bKn/75obtpCVwpZOqGc6v0i\nP68er9CAJ9ijw3nSGg0H4mAc82CKI4vJ14P37mgGWukYxcIi3ynpmh8CjTEf\ngH0QWtvqOQPmFEraFv+BNhYGGSBJFt4ZZSwQ8y1Q4n0UoZ210e/FmVxKPMsT\nO/rAcLm4/pA2aVHD1JKUObijQJ1NUjRA5DNHWZZlo1VDBcpX1KcGozrBDjGD\ntJkgup2vwakFXBAYeXjOBI+YhQzDyviaOuLVyJ3hk+BJI62wczJ1U9jPBnpr\nb3frNkNzELKfVAVedEOeP7WACXR3xZxLAe1bK9FqBYMhNv1XcWnEJKR709OI\nqmZtsYv6Vkcpp4p1PXb7+YAaN8WiW0e5liost1A50fm5n05CTLXRUKipBSsv\nc+6O\r\n=O02v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEh7B9WtYUSLC76whZPVaL6RPPls5S2e8EiBCPSEtf9fAiB8LgyuMaJw7oZ6QXOSS/2CE4vKAgcCPjllzfsAy8Ryzg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.bc113605.0_1610585140620_0.26954439699187027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","@material/mwc-tab-indicator":"0.21.0-canary.0c1d6ff9.0","@material/tab":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0c1d6ff9.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-msWPS9u/ci/QGTTTwx6m5oxiZcxQjqg9lUH0/M/YYEt9OI6S6+VQFuxwPl6QW1NdlNvJIp9k+hT2InrHHTmeLA==","shasum":"bb54f1ffb04fb57014d398b8ad4c2858ba35aed4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZ8CRA9TVsSAnZWagAAMrUQAJumh97OjvOOGdEZCJ5C\n5lQT7RKvMr/Z7y6KviDsyXJcI+SDQnnhWhkoMJSbXsVem1hoQZzrVCfIyPvG\n6eFJvn06Z1j9Kic7eFkuWD7zbK/7GcOugEtRkJ1AZ7AdYlIynhguzetZMDPN\nFN7K+aIpMPAWrXmrE1RxeplWiVdI1DYKepit/XwZftcNgq7SudXvaRAAfO8r\nsxUfKvRZXze4G9xFFaKzpYyUI5zTLEz1Di+eXRYQnyaxTXWtq4kwNGtOhMme\nu9rc68DYXGVHE054Jv2r9aKrXiOMaK7tLNmw4NhRDLSJvZ2r3J9GTj/ORkCX\nmGK+oWtMZi9l/Q1j23P3q/WOhm/tzk5G1sw4YNUAsBevQOsWmRRA839lDS7b\nGpeuUMmY3A4gSNm1NchodlkefPP5h2w2KDYkdGdvmRWTrW9hNh45MCSLqrBc\n08hN8dVvAelSnEmRBrx/w95CPEDI1rx5/M5zAUr/EHGyX6j5SdF3XoWEYcYB\nP0sOtNT+KqEBu+bwnyT5CMbhXpBJ/C7BKomyNXalgVF1RcXulSRFU6/MePvh\n4zNzA6/Zl2qbd4QR0zL6yZEcB+JZ6fjGq5Q7nOCCisCWTqF/4u4RC2KIDwLK\nSiOVgTEo3CJAspRB3nwqBrnS71ul3l2vBhaSDZsqksHaZVZK0lAVdFML9fGT\nSmzG\r\n=WEtx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6bCMSz4HgZoCPqdFQfPGJzBBWXANQo9vKZfcIjI9wqAIhANqPN/nOHi5EVdYOletNMDb+or9UHs+5oYjhj9bpWn40"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0c1d6ff9.0_1610741372260_0.4798313094135711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b4332e00.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","@material/mwc-tab-indicator":"0.21.0-canary.b4332e00.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b4332e00.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-YhO50VUvX5v3+HG9FE27vYxa8G5U4QJrXJ0S1fh9ELn2O2Tx66wi8PstQHNY2C4DQA6/k6han0xqtW8JJxqWow==","shasum":"7d8a6d88dc13492d1c13deb4ed7ca9a622a719f0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIsCRA9TVsSAnZWagAAcX0P/1B7RqGCY4qw1ZLQ8r/E\nag09w7ua2VOyK35mXUIlPjsFeiUJnxLgKTy1T1/W8Jku7ArtuXxj7qJK3aCE\nuIvqozF9nZSpBGR0hS4ZHm9kP5GVftAFElBzFmOBGzc/eVlSGf0Bv+fQzL8b\nqJ4yN1K/A6crreUqZdhSZIM9G52iOMlEjMPjAiJ54Bty2NxxczyPvs38iFMw\n91xqD0hBVZz629oaJ8sI3cqHOF5vywmEwv98hVizExVN4bkFJe5/LbqYD5le\nl/M5xWh4veODtgnQW8Tv7rDbgVFjOlRVS8AUf5J6J8b1gbBDVzlx12JhHrzh\neyyJ3Kz81hL2tbalFryFu2hLshVjzt3NACGHDQ76oVRwDoq0Fhm8QnqMbZf2\nZOuOkuAmDdBTzk8F0OU8r9Ob0JRFcSdBnKDmy6ixjaZECNlxOHnhJmPi3neA\n7gezNuty/APZyTEYitG7sIwTGaJUM5AGVFTId9le3Ivch/g0dJFLt+7wKRex\ntZu/l0m5Tlnn2Z6rysUpZzX+1/O9ArDyyhMGLrUf1poSGZ3QRlFRSFmZ2a9w\nNXTnND5pAs0jJQ4HmyDD4k3bQPhRm2Bv//qy9iC7uFQOvCVdTU4BOiU5VDlj\ngvZolMCH6pK0qzQcpnD3+dU1pRGmCyecDI/DGsl/XZwtidaplWyCZjPr7Unz\nFhWQ\r\n=zNoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHK8IcaMIl9cQ0+s8A1DOFSS1CSjPuUbkO4p1JTPitc1AiEA3VzPzOtxuNC8HEzMk5u2gfDwG8n81w1+fw7ZBpVeWhI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b4332e00.0_1610748460396_0.30341752634172714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2899691d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","@material/mwc-tab-indicator":"0.21.0-canary.2899691d.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2899691d.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LWa0IMdPMpwOoXhlCwNRAScS0+TxgmhklxGPcK6NdB/r8k/ZuyOT6N9rOEX8zJfOffNlLDWvlNHmcqzW4P2OqQ==","shasum":"7d9b7394c51e9d53d76ce5f1536df097e984228e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUTCRA9TVsSAnZWagAApt4P/36jZ8CXTq+xbAWFSKcA\nPqHrsKgB81tHmxT8srFsrd/3vObYrvsAdn5JlCOW/PsJ9aZ5/wpR7K1RmcHq\nxREHEHIVVd1au3qzA4XLd1pkENxle4uLD8WL3AM/+KA8v/2x5l12pAizkpDG\ndUrkYrKUOCJGOXBLHc/L1Iv2Ih7UFezGKJl1X6jqj5xOSaaUC4V/JFxvDXZK\nWhpv63M55VMDPGxxggj0W36frOsxbPVDASBfYaWT0hUOruCBHgf13/172Lbm\nL/QoQammvGCXBP3wFefUu+8uzYUGnCO1nQXa8vvlAlmMS1AhhrRQMa2fd4pr\nghX8sVl6HyXeY55HnsgWIzHRGuDzjySBxsGS050QtlRPBny0ujo+LksD9nkO\nbd3v12fSBQMFF5lZH8W1uY+L23jsrEGvCz7Boeb2/mjFCI/O+MiL+ULpRueF\nSCDZ9gpw1cld4Cko3XB3fRw0M4J56DyOeNToUxtmRlP0iWtHpOAn+PQcM6oq\nlRAEktMmbSrAXxPx1olfXLTmkscYDIOgTwfqt7p9sEC13FJGfWnEPa909dZh\nm1oYSSohvETwNHEIK9Hxj7eRul7/oeFkbUbMFtBp4up69f8Qg8JfRK73RFsJ\nGVNzz4oFh5CynfQ+RYteQPQkWRIher2IpDa8kc7d+i7u8CRhRKNZTJ8ZMIcA\nJAzw\r\n=lOP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGPSUib6VdBkls5Fpuq/POX7FWu/smtpHckUNHkPt/VAiEAkpcI3LZjKAXWA3DZN6n9cnTgZyFB7KmUerpJjYRoXZM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2899691d.0_1610761491174_0.7079100285614368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.fe73953b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","@material/mwc-tab-indicator":"0.21.0-canary.fe73953b.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.fe73953b.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Tqux4lqmoanEE+sgmpNr/GNvYT2yEh7Pjmjmf3cHb3Uz4OSB73qoMMgynbpUajbn/VXw1l5kr1QR4Rdi+K4Gig==","shasum":"f1fc909c8cada3d57097b7689250fc046dd57e85","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFDCRA9TVsSAnZWagAAbIYP/i9Ac6FqB5EOOXqgOWvd\nkH/noGa+MmcyEqborqHhybP/ttLd8QGUCJfePpxWCRqt2rmUyw6+4lg0vQP2\nMhmHBpiachHlehH2vCJby08SuYtey7NLl4u8VHkbBnXmlGxysfGLqedpL2AT\nIQoaxNCh7gYhb6TXKxh5lP4tNLjUREwxSBzt+99HeG9eEIjRcnWlihxy2Dgy\nBeOItUaf3v5WuNY3f8s5JmKl75Y0R//ewDOM3MKv11CU9kSzokNdatp5Afvw\nMmXk584KX0zRDY5eKys63rv1lCzvvjGNcySLW/lu7/LVFWI3EJE3lZNzf/i5\nflPk1iFqmxptPo6fLVqCPKbQnfZUbO16c6x68h19YoSp1L1bSCVtWmFTOi1V\n0LZviSdVScIVl8eFX9bn4te8kszef9/r25QeBVsSC4qEqxKBfIeb4tln0Ej5\njIBCxoivykod4rCmOj9Gs1vVyUWmAO9gj5WY39ESX7rpkwK9iBYY4JQFBbnV\n6riQxoC5+BM22WkYdF92BohoW43r+iYhx2N81lE3+0C1NYRNmTEKlalnQFPS\nIcSfhjqnUGM5HiSTujABNkdhtoHCWI7VwIiTRQJ6pFZ1sFfo3ktG7VEHj3A1\nlZDRA9tUKOhcbX/NogZ8L8WnFhVwLGj9osIFxXakAWf696mSsDEUF+MUoX4k\nRYBB\r\n=MIpD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkJWd9NojApLGndTMRP+kQUwxXnnHv5yZ7IggECjKNAwIgCatsNLI72fQP3ftEHalvTNW8oSa67r5pPhzzXSYL9dw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.fe73953b.0_1611084099041_0.8205958824810407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.d3a16455.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","@material/mwc-tab-indicator":"0.21.0-canary.d3a16455.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.d3a16455.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gY8ANXtQrT+Xxtzq1qmkYfVhyaZurSW5/rRXEaI4jsAohfU2Fz5ctetRnWQXu51lwaOSLqc8xzFDJIRtfiAfWQ==","shasum":"9e5e5db8d563b20a894e42768ea5323963d44445","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziBCRA9TVsSAnZWagAAwTgP/1HkxRhQIqyq0xf5jdnD\nSTMC4viqsbTlo5mQaycKFVMBE46FXTPC/7s78TCdp7HHPSBuX++6GSvaxMje\nuTjRaDofoBLW8zN/8DFAq7TjgwMFJcM0+bnZvpv+wP8jmLHRzJ3XOSgtuv1A\nd8SkSbFxnOCwlzB4tiI5Dw/+GGpy+AedJ9rPvxZAP3mnRfkPasaEzkWBlmYl\nCaAF0wS+xhV+hikCniq3JsyqF+JrkhDUZOGUYp1CKVO6d5LOyBsP9Py6AIdg\nvX/QoD39MZCGKq7Z9bE8a1g3SBzZnEZJRPxQOPLPh/py5sKJM4RJLMZfNhZL\nkTJH0Y3vSPvkiIjZ2vGHSj0IHSBqTCjiFJJWrg6fQ0IiJLoOh05coOwM9SuE\ntgkNxqPRadFUnuc6HOD9jtQJu5E8WQNujQQnaY4e68S4+RiJXo02kQ7OUVJE\nFLIV0yj1SFLPuk6r9pZUj/ph5KS+veQXZqRKCB6SaGP/9Gs4MSnprkzFxqVs\nGek6U1Sk53rUd0U8IbP5k6WsikbP6TOpEJtmC/G/YaxwsPE6yqRD8Kgz6FuT\nLGc3iduXutgDwUK/3vhfH70iGQ88l9i0GGaWC84Ffh8cPw7poN8Jzd7L//xb\nkQcXW8cQehjw7CJUbx7uz8qupOBd3qQeCrgwlGhqsB/pZJcxhPfakY4sVune\nA/Yu\r\n=HHv3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuS8HT+wBudCsV9okzAi0zq/A/SIJGJROY3vDtBbdYoAiEAoBs3U2YIfYAI/GShIolJ/RZgI3CZN2JdrHI62ByjS38="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.d3a16455.0_1611085952851_0.2732171777681798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.597ca1b6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","@material/mwc-tab-indicator":"0.21.0-canary.597ca1b6.0","@material/tab":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.597ca1b6.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zhin54fGyg0lQZnnjz1XgDY4+jeX29OBKwQLhsTWN2nD36sAGk1MugkErmoo2Yw8aaN1I+FCWT03A/LgE+p3Nw==","shasum":"f171a80c2b8ae21f6a631aa46ca10ef840492f29","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CeCRA9TVsSAnZWagAAYm4P/jJUxE8tuEHEbPApb2p9\nE9pF7pJkqXvFDzQOIgHNkcKegMVjhuz/xGS3ooOVsyPjysYeKNXqWo88u2TZ\nYK3r5fRbQ2jg86FsFjOOOW+I8PhAkZyeJaCb+4ItkF2OsCofUVVoL1c5Xpp3\nv/lZEmgtTwzS7bzqG85Hg43yS5QX5YWPcCDlrJGjGXBM8XhfPdb10TEZJ22a\nIrclxuyLZOLXKpWjwe1JJNr3oUCaWM+gr+yrSbaJpW4HaVk2l7X8UH7uTSlL\nLqOfsb82UiTWZtci9VJtADKhgpT9HmnjRa519Xl8ghg2Y323BhW/16kbzz3Y\n2Q0GOEMhCb4oN3lVDLhXPtAOdegaI9grHsyyOC/PTASPejh90B+p4Yq3jq3q\nIMsJ57MC9USQoTlTMAaHn8PTAmGQtZMgh/hNz2jRzRv1gefGPJQnLk50HdA7\nER4I2+5kwS9VHelQmrs/C8toBoUe58Ok0lf9Zax+8s0Vr75/X/LdaRdn7R4D\nBDfIszRgebtaCuL4CkOJj2tCl3zP8nxiDiWbR2xBMiGPwtm/+KlZw3oS+2Zb\nUIu9AZEkLhvKxx1HKDOMBSIMUmVwanX10AYa1kcHP5HqmY0uHsmxf263qxz5\n+ERo/t5GdhdNT0CV6oP1DeaHkjFVvItvk6LyCgADmAfrVz+qbfyCLWUjpjd/\njV0u\r\n=g1QQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXN8kfXwy6Tva9X9Gn5ifuez7DMGJqKDW4fDT74+CRfwIgAwAPAyBcxpFjOuBfyA17dWrOBdo8RzFYVu7hayuUD5k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.597ca1b6.0_1611104413560_0.6333091972179754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.3c195efe.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","@material/mwc-tab-indicator":"0.21.0-canary.3c195efe.0","@material/tab":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.3c195efe.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-uzTB10ruX6A3z4klC+awk7QYT3I6WlTybWXoTc4TMr0hVQiV0sVUEzUA9ZZNsPpjbTKIA7DJWH1PEi2t3tquUg==","shasum":"4c07df0b6c742c2e065352f7054a79219c3288c7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48HCRA9TVsSAnZWagAAwN0P/1kWBHEA5/ACd3UvUcPt\nDkI63j84ZNQ1vOVyDutcjUOvDIaytYxOs8qqq4I9FB9VbWUPNWq46gdLLvqM\nBNAeEZepwUwcz/MFJrIBAkU4V9Hmjo8UPEhY1HolK4jVp7dxgO/Odxe7XHmY\nxKd2mxqdu/Kyj7PO5+b17Kp8/XTIFddfprNMs5cWAQKTNlURe4B76tkeY5aK\nfWFOjORQp7uFpaB/YNfmy2vGvYO4rX9HXaqTH7Edbo8d744DeJB5ak0nM734\nNkYHTYpK9/h/ohr6KsiLvOjv9RczMO9Rnk/acHPWkC6j03aUASdLORe5bf8L\nZ6dgt5dxKz4gbupLhVXhCz3dOQc4HkEUjWKXoQ/ItNnID6zvSCj59vL/lKsk\noaRa2ob4G27sNDSKtqicKCHoO5C3+jXzi8FWdAmCRa/O1Z0YkyUM/k2dDSKS\nsqnKuBqiKBr/dwGoSQnKlfRrk/wfNsKUH1pNVrVbpHESyJHe5Sd9LSYopTUN\nWAIttFPEbtRWOOqnCCXYEr5w3wUuP7X14xoabpWwG2rRV0g1pJcVNUUiWiYq\nzcl+wRTFFru4aUWTPD/4rgFAgHKsABV1TjsiXf6TiUh215XV/cbkNYLlRylK\nM4cW1GCwd8tIeTAAwTQXcQG3K0lL43Pq+QB2EG5goMJ7UJCuKhMkVXGTkXTV\njEjX\r\n=f/RN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLHCJViQ5PCGkX7yzzFqhmxk4iTYIb+IsnmIDR7jPAgAiAR1YBClYLvU5wXshtloFTgXbwhLrPa7TbH0Dqa6mLDYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.3c195efe.0_1611108102762_0.4595895616921044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.f7b8755f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","@material/mwc-tab-indicator":"0.21.0-canary.f7b8755f.0","@material/tab":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.f7b8755f.0","@material/ripple":"=10.0.0-canary.0c95c9f7b.0","@material/rtl":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-X/SEJ9vOBdjpUVxLzXEVZrFZZrepUnY3wxueb4bBGkfdma2LRBT1T2zH0SEtwAbgnfoTdRw29MkuMyS0LUQ9cg==","shasum":"5306355be53175368b81dc0a9251bf96d01c9ed1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSmCRA9TVsSAnZWagAAPIEP/jCq3x17PiGfkNn24q9o\neEQ3UmyOn9HDYIP44v9DYzRV3nFWDlpROJlHwY/o3ZA1JudHd9dYIXndQH8y\neNJi5d084e393J0o9hlU6vw94FE6CFpytIrJ34ha6vKycOnfpM7e8m2kLJkB\nskaoZSdwTR6G7tkCbCu6x2uQZ9OO0aG6z5v4VToyPuLJ3bNtn39LIiw1PEes\ncoqgcEZT+JmXXYhLdorPwbkX9vH8RrYT/wf3O4ry7V1TtCEf6xW0Rp7GGuJA\nVr00X/cm1abHRc4pn7+dFlsjKvWVOP3PQV1+2H6nnzlI/5R5fWweQXLbOuTf\nv/bOSWJjJErKfLLhr3EwVgBlGCOhYvzdWxtCMqtEQrEhREJm1YZNHOI8Czfk\nPE5D5o52bSeMpIk3fNUxDnqGyMVnTmprlpybzPT9Bsg8ovMultfoRyxz3CtS\ne0DQi2WmiCuSCfKs9f696W61It7ik1+VBYq4XOP4JM1geNqcZ7RaJqLGQ791\n4ALqPXHq1yr6DIpfpFjcdGvg5FiP2WpgmjBLdif27dKZMclJjZ4N+ULkDwwl\nRfSTSvIV/thPY69/lb20oSYsFhzLGeGepbs4trtcI+gwvzWHFLMJVtUHzOvT\ny9HdBK+uE0FVvriJlFR1YQ+ZehhgpO05ES2U9l89WGuN+0irbmswjFufpTYK\nySFa\r\n=GxwJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/BRETNrFEqHJZh4f/RkXaDuNt6XAdkTokYVq5RE18SAiEA92a3Fmf6b63AuDHC3ELmQOBiM54gxJf0gOlhy8ue5ng="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.f7b8755f.0_1611175077553_0.03141799880743257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.f60de7df.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","@material/mwc-tab-indicator":"0.21.0-canary.f60de7df.0","@material/tab":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.f60de7df.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CraIAibb2zV+53GXXq3MBH0ZPH8BUfvjwe2mJt0cDC/MtI8AoAm+nJqLu3qievpYaIlH7HMpale1lfJobWIWIw==","shasum":"0097c8f483a43cc2afa3861f2cb402025996a516","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6UCRA9TVsSAnZWagAAee4P/jXHh3g9g+Qux0gpwuvB\ncEOe/4R1ijDBItmrMHsPOWSIpgSXT1OQhflqDrpVroOXeD76lZFrV7PXMMR5\n+yF3enOP97m+B4/CcvpaNAQZbeW33nNW6d1s0HwL2wGXv3gGrbNbkQGMtz8g\nye8c6+OFZiA17M3YVafLfb93qBy7FuRwlXiDLzv1acnqhgYonM7iBAROev48\nt4whfOSQ6yh5j3XUE+ptklcBPQgj8mPZM+xgyz1DM5zCE17WGUrRFu7yh7fC\nafF4CRrfHhHS6dn34eNeHiMNl/nrwSr7BsYnIio4wuoHj4m0o6B+2HMAteCZ\nPOGIkGd0CDtY2typIy+QhUwPrVwVO2BNnxbE5LoZVDC2fa7xIEzS4dFkOY5g\n1UCQ2eapDmEsLgufO4TVYUwQqLAxqtSX7WZrWeopHaOsSAEqVbvi/nrb71l2\nGRkhK7/30ZudOQ2taZZN5v8PphvjHiPZj27f0eEyeE4dogGQU9TOKT/4BJWR\nhD6JBbiFcBVM14ETj8M2/Me3I/azgSr6d+dSgKIiJtU6embcxmptL2Wg5rIn\nRzqD6fOW4A7vANF6V9VPKrvtzLvnUN3j8BKKayFcnkFWbxY8jbs+fBGnD8qi\nelnvVphIT6U/3v9KruCoWFkdOf4bHF2Rw3/QKfUTnPFnnBEZ9KUtFrvipsGx\nkAsK\r\n=xWOS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGw3K3rcYOlolsg4tYRDrFZlwoLNmhvj3XctKbbqOfh4AiBORPCOnUf7hJFDsIJZRxGoqg1KxB8kekNelma2twvrtA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.f60de7df.0_1611185812503_0.056364674222889155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.664a2927.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","@material/mwc-tab-indicator":"0.21.0-canary.664a2927.0","@material/tab":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.664a2927.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rf5LfAlmHWUYWsPkL2nsP8KZRGhJvkO7Kw6AI8BemqnyBYTj8wTLVOWRoDlmBAe9VyEtO1ybuxDRcnkrOp+hcw==","shasum":"226d0593de08ea2a29f864bd06fb9899ad0f8d5f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOZCRA9TVsSAnZWagAAAOEP/0sCd1w+c1Wuwu1ouTrj\nk6zpcnp3aQyEeWoU02CFcOOCBVkHLl/d4aITjUF+gwt2E1X5LHN9n5Pgdo42\nDn1A0bt2oliw0p62ElTzP5j86aluEiPBPN1UewX9eW39l4NuOdY6UD0ccV3w\nI+7aYxKulFYg5LnOuv/c80xncVpNBE79gNE7lEEqPNztIw/DOL5aYEMGAsIf\nf9AIOD7j8myCDBprMYqFQFZ2MKnNBjpHEqJiQ7WhgPshbAaLRsyFYl5r2y9p\nXRuMQbm2kie1ba37929hQn1WeZIjsq7pKjXrQft+co+3vht3IxRWmOYl6ztM\nkHtRRJ2FpaCLqPqSUa2Q1lBu9BbyO0rd0oCSPdWRSl12z3LtqUio3Pk8t0ke\ndB6KRv/2fmhwX3ksLKw3Jckt0dHjbD8xUu538m3f7ck6/OrouI+ZyCnH6Pa9\nPYe6GTimaSHkupx1047Kye0gXg0ynMxXZKgwPCdVHi0/du7/pZ0qzRK0ZnEr\nFU0ERTIz06F8Bk4p73XntJUkdWEsGQzJ+/i5ivQggYIG3FDPL9XP96WHB8VR\nlWG4gYxZF6JpnB2F/4Vv8ELTErczvk6IcJ0ZZSBw2dkKNJ+1LBRTtR2jPHtV\nB0goMI7l9KBqW+pNFlU4k6u0q4tdvvH9Go6MV5e7/veSvypcYhsMi6E1MOOD\n4NzL\r\n=uL1n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlX4V3iZA5SVOGme5y/6X/ve2kM5mgvvcjgfOgGl21KAiBdBHmTGnHGhW0E6o+uZ41FyawWSFltM2ZPhyGlT5wj1Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.664a2927.0_1611256728833_0.37026954522733346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.a6d312e5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","@material/mwc-tab-indicator":"0.21.0-canary.a6d312e5.0","@material/tab":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.a6d312e5.0","@material/ripple":"=10.0.0-canary.fd61b0476.0","@material/rtl":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-npHGgaopw2aW9VXljnpEPMv52pijiWpAW4lOcNm/92J6lj7CRxemuZ5g71GlzZStGx7ecyaHOcz9JFWEqXDO3Q==","shasum":"7b9138ff0ec30bfa188a5b2a295260217625e875","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaDCRA9TVsSAnZWagAAwnEP/iLqUY5WUwIfYY8kSvOE\npTs6JfWI9fPjast3RUG9cFcscTIV5RgYb30qMypA9IdgMhoJ54TmuByxoRbS\nqen/0FWa3k7niqjRwXLF3HdFwvIj2IwTYWPUNlZGJEOe14VY3ywdxVkHAI/3\nnW0V/y5lqFFdWJh7RzXcc2WtVnM/BqIGjTC2ASmzsFCPIVZiDg/fCFp850tV\npp1yIKJJOokVczyjMguxm5k6k5jDZtLIL9v26qfL07s3KGAduwQ3kuWx3w1x\nGt3zfU5eOuHIVW2mSDYRabhYXVArd0iZqRvU7djcHanuqytg19QoOQcSKhh9\n1MsKlVyFpEkSTDlxYbKjyb4FNGj5Ify1eQ3iif12dpwTALLgpI0D3CxDhPsZ\nh8A9i4wz3LjvKIjog3btRaSk4uCLHe9oSpSl2+pkUsMsSPPVoQvF0wDDSwYb\nJ6BePP2fMntBHd5WN7ZhmU5dI+seg1DAbLPh+Ee/8N4tqHU698ZJ7MFurjm1\nnTMMK5B8/j0WluRv34jrJfdwQ63MlwT0TkmYhWJQ1Sa2SAOyEO00PeIVzRxx\nIaajQIVyfcD1rmYo/cva20Re3IY/GVsv5YxCeZu4mi+kl+54QAlXkVt56nqt\ndPQxg0Wf1hwgtmC3alphIAHwVcIGgFPFksmOelgnaMMkP+zPDeuH6Zk5HUF6\nz+B3\r\n=UAGj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBp+zLmzYKbGayOJNgadcxkpbpj/rWyhWx/Qa8rb76ntAiEA9mMs3V9qvTPbFVspMF6E/yZCiygas0GEi1wbAbvnvxA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.a6d312e5.0_1611265667548_0.4716623218370559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.027365eb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","@material/mwc-tab-indicator":"0.21.0-canary.027365eb.0","@material/tab":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.027365eb.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Zrem0EMoGRxD1NEvthnEs2NsuNcrMwRVS1Yz9P4YIrJzRtO3a7gLZCr7AaOzaxoPueBaGbYuWa2Om2g+fy4jqg==","shasum":"6ed5e491f393e823ba1f72db1d9e3a67ac64d340","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6lCRA9TVsSAnZWagAAb+QP/jA476OqsYG2r2keVSh1\nTUSbqpvVVNK83iTfZHt54ncI4Lir68QHcLSTgtDqEV3oWTRW00HtkhqnWKdK\n2iBcdbZcMtTVaYAbFwpdvCy26mgPRs4k+c7V2FYhA5AW1aVCY5i0hgO2ljj0\nq42Ch/rq7eyYFat/snvsH9EgoKZH23Nt/5BgeUn5I6bPz6bdui8+B7+JfSq7\nYS5bMcsWoOi5O/T1tPXStAqwRhmAeKRaEZpT9oa+3bMPBs021l36FcmbrDzK\nfh7c57tvlE6mRrgfgyB4/WwDwQzYndW6QIsALji0i328LkyVyVPf65pTLOTq\nadu4g9NAwICWpDuL4lCa1DfUpqyEyXYcZozXjLpVNg/I0BsQKs2VbYIUuEs5\nQFfHn/f8vD0AoH4bKG+pIwxXs4ob6gqbramlUs/1g6sGYWoNfNRPtBptmbic\npss0paIgAiG4hk6Rhru7crLBXIo0YdSi6a0rpk3HP/58cZrA75EjBHMsb0BW\no75AWAYNmWvGHEE9XXWJg8ZQ6l1SOx1M5x4ffEMybY+nY3j+APYX9F9bZDkE\nrruBoXj4jFPxcaHM36xRx1zTT6jFId1wNFs8+ufOmGGmPlOhZoEL0H+s0qw+\nDuVGshzBY65bvZXXlHNOQEHHZ7LU6JuvQaXskVOQBCPCUJ/YwZH6CtrDpme1\nvfTv\r\n=4hX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOQehoSVEotaOa/zBJ4SMcxVL8FGXQytH63PvfksrbJAIhANc6S3I4vYOPnCt0YU3WwxdKBbJpNe/hIvv7U2I3E6Le"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.027365eb.0_1611349668693_0.8689429439730154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.7e72b66d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","@material/mwc-tab-indicator":"0.21.0-canary.7e72b66d.0","@material/tab":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.7e72b66d.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-coA9Fo595kjTiaL7XtvB9s48xrf2e8lAPEeS9kfCOdYOQSqzZcUJ2YZ/fgHcR/lucP+YrXO+mIkbYi25nNze4g==","shasum":"1a569b24deb8365a4a9003bf05f691105fca570e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC184CRA9TVsSAnZWagAAup4P/0kW6basoK3WU88OoHi/\n2Wp4qb+xtgZgSlxcFbHtVeRk7pCIU02VYFyGVejdi9tjcDkrb5T6pboNGm9J\ntc/4uGddHOei5BSPpfuRjOnqM8FcAwROlhje4Ky64kj9fU2nh0OSDfvkRXNV\nflFAkUFapMPFWbdtPeXykSgP7bK/OfM/oU9ByCkuWYbQDijYdt6Hq31I13AC\nw6wnKEk4k1785YcfvSNbOxJB2tXQahThzRcnN11vZy5rrssjQimXc8bFDkTw\n04f9SsiZOPrFOLivhk5dprRb8sBg8Z4hiuX33Zg7aBoyQ2xFFnNWWSaivfzV\n4+uKuSpwjX2NKEAWVkcx+1E5jFXa3TxFFhwxyTqDU3AqtnyNETdtWfFeINNY\nb1I95Ssdbb5lhWouwnYBP6JZ6dmbVso6qg5en69cw5Wg3vSUbdamVvSwR9MW\n9NnE0Ct+X+gxG2OZ0uw77vUtl359ZwJUWQESh4Xb40Pn/jkR4Hbmh0pp9Oco\nWuibvTyjWjA24ESrY00YAW2AW/Cif4pP1PI5rytlq/fZJxtI76ki1MyOQIaz\n7QXR2gGPUywO2kZuuW5WgNFB9UaVM6cLxYcE9GsdKfM/eoD69gIozT+MkYX6\nQBBdwhLZZYIOwIhna7sTD/Gi7Vmtv1qo5dpfdMOTiVKAyiEt8Li1jqrNvxmu\n37Lz\r\n=9vIu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzEzxtFCdjmJmm0Wf+WPXTGRp6o00vCnuCKF3PhUJLZAiBNJQhkRh25RdoDx/UGI84tLESuzpH2M5aDlWxaocwBNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.7e72b66d.0_1611358007861_0.49199275101425943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","@material/mwc-tab-indicator":"0.21.0-canary.a6d6a1e7.0","@material/tab":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.a6d6a1e7.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2JlNe/nhTMCy7NYjwshDZGqnHqvRl6t/yNBn7ZTdf2r8YHGnE4H9n8u0R08lajV4bNwsfRzBpVCEhn0Rpje0Ig==","shasum":"53655060d82d469e52e8adb953a5646d751e4d37","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CuCRA9TVsSAnZWagAAS5kP/iKUI3DkgMjIkz92rDui\ngD+1eOehI5WUpbQfAj0rJFx/iIpJNuHmq3vCalbJqJckTOFDT72LMeppnXhM\nbw8OrqZ0mobRenwLyG53Ksus5kiG4zpKn1Ga/cZhEDAJTjEmqVuZCFqKJ5AL\nAkvN42baFEb/CLQFjvJcMnG/qjG3SksdHMrQGj9WP+H7lsIS5p/+uMUFWe3E\nTsBBWJWQGvxtOW3kVUQcv2rQrYROzNhHb+Vo17zLHtKAGh75p6Qlw6GNbDJC\nyOfOH5WUUGfrVuP9rGs+ZuYoVqTArzs9wYLBmx0Bqt8l0dRf1Oownw+qYODk\nIKUR9I/C80xTPCQaE1rnMmN7EsjuM5z/spoc9gJkXlTlJggVg1zSt4JTZ0n3\nnGrB5DhUt4NA+olQYTuD66FFbREfTErm9dy8eVzVaAg+Xe0xYy7IHSqzcMAq\nIh1j9pzu4yYB94iH8jnLjKZ7glj6Umf4bDqazxK7dzmUxnzV+y380kjVjrJ1\niYcTqNhKEze6LHryJ4Fi/F0W22HwJrgRh2gWEy2lA1Q0V3RFLZbDjXK9G3zc\nPQ4pP66PxDamBGYkpEj4JyvHrio32twDmLwu0eHLphDqOzS0C+/AVqQ0ajuY\n6GcHL52IXtt3ywE1NYy/NX7ETa5fpryCp/Rkm0UIeh0enRVX74vunn7RSNBc\nz7Y6\r\n=Fzd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoXTIRxwuf7+uKb6HivyZxjsQWGOLZzBzXPJN4zVj1lAiBrjC8SaOsNge4rLZAn6iydF7zGgSAniOyQyym/ncXb3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.a6d6a1e7.0_1611358382504_0.024796156268644065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b95fe100.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","@material/mwc-tab-indicator":"0.21.0-canary.b95fe100.0","@material/tab":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b95fe100.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QXbt4mtV7d0JYsVewFnUR8wSoyKTsAW7q2YI8a6HmDYYSsetXpcruiGH1/kfDsX/h/mGN5y+UGGPKxKEWnPpLQ==","shasum":"8ae776cc93934cb76fa4b87485d40875c847f6e7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UpCRA9TVsSAnZWagAAWKkP+wcljqXRTtZcNoaF/ZIZ\nnpXaGBMHDnXauEGQiZomy0G+aiV9HoVWCwTXBWwns5tEcBMgWuw/XTbZdDK1\nj9vbYnlXOQvyh4U/bnUW8h56vGKebPpPpjIRup+C5bnr2lWK4gKAOfDOtvUy\n/FUyLzzae9wSesXrn2icDF+3Af8u7E9yBKNhANhUaTukl22vbrHW4cubJIiw\nIUpYSpIcvNLu+bYiXIs1x1QBOP9NrdVJ2ynI0FbYi5YGgByW3P3U3S/H2Mwi\nmPStPzsc8K1P+Z+tryvBE5IdrwrbazS4GblPxxiUY198mqLj42puvy1xS75k\nYl1rlWifxY5jfVMD75g35Rjr1eQvdqO4wxffv/2tVfqLXMafySuztSXkPRcF\nUPxqmb3hupnCa+Xx0rYhf7dwj5AaToH1KQOfPmPpBW0OAXl6M7dxSnTlUw+K\nNTv+ET7qYIeT3alQCXTTubzGxuC0scguJa49jRwkayoHxmmCipo1KjxoITF+\n22MFw1Lg8oS5Gm+BjGmW+O2BKZpL9/x0G7FQt5AZZ2bgI8uT63O4mFAWRh3P\nvSvdPBguQHXGQVqHAjOPiqBzYr/23UDrO9TjOUDOIeym3ZTc7VuIgzPuRSFp\nBlA3x5rpJJGUiT1VL4QhC7mGa5EgTsftL2XQ+QjigpjGPvJEDWPXQnaBNo2v\nYbK6\r\n=mfBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzbJPQuptJ4fteXlFJ/PVYZho2DLm+blryxJs9ZB/yoAiEAzq50RltLYeg33RrWmfIlvwYTJcK/IFtwcw5AYJqz7MQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b95fe100.0_1611359529206_0.39131386151943426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c8797192.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","@material/mwc-tab-indicator":"0.21.0-canary.c8797192.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c8797192.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qMZJUW1bybkgncx/hpfafpjwU9LZUDyANreDRblKG1QULJ5y/p0SyEhbvYYR9IX34snWLVltgFa0kdKKz4387w==","shasum":"5c8f194404e6057b0379fb9a0ca7a8cf8360fac2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jCCRA9TVsSAnZWagAApkIP/1d1nlAuSnsyzjficPQf\nIBatWTzSD4BOKjAu/k/Exl/5DcD9vblT4METZxl9d4wHyqqmBuEdbtk2EJVR\n8a/27JeEc0SqtSwpwbq0NX+zuWZvxQr3QfYT66HDclv8+1LHkkFA+ELWfcHp\nqPcfZy65+hglR6c8EZ57lvXEocq5KTsEXfmKUYJl30BGWglXzvy5ueG5QILs\nGHDfHvMNCNW+gV1Axp/LPeUMF0ICPyxJfIB/h3s1dlr8zYn8YErwtWRmI8yp\nkucrpUggqohWl4ze5kmJKc6StKe+PEW2qW1zOjqD2f397bVzWZnfrZiX8enV\nLi7EN3/DEvjt5UgbezM/ZlheN0dHFCWGYeuzRW+JYJMkf/Fvbmd9mEu0x5zo\ndp3pGUVkFecrWjO/skcUAp2vCee9CB4K0SihOoRJMKh/zvlQamj0ebRspNEV\n5nraXi+JrUIYup9FOYVPzXWVOJbjX9TKwHBw0Uk7tTGVtsH444sGUmosZUAu\nWwXZMi0e9KwPlfbHxI0u/rXHOlvKMKgOR5Lo3jXgqM0YwFr4uiWJacKdMcr+\n45UhG4x1rwzQHYUC9Qt+LG08mCIpx9rdvLR8qk8rEgtiUamlaNvaNa5QHynY\nt5oGpN3iLBMoGWyjDBpbzI2WDlRjMS0N2x60pO3oIiYlHRuuaI8EybvMWZ3v\nZdg/\r\n=7XSn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjTco8gervJL95SA8vCJbF9KItO28V8c7EuRDifC4g7AiEAnB6QtrFTfcrhaspwDLyJMSnkmXyCzSkyKry3SK0MawY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c8797192.0_1611360450261_0.6018186502692005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.946f5563.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","@material/mwc-tab-indicator":"0.21.0-canary.946f5563.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.946f5563.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qG5shA2b8xJRlD7XIXwjYFPD0pc5lNs66wB7fMxZ3AvmMA3gCy3PImGFKv1dGIl9seH7uaTXmKcjIv+ufpNjEQ==","shasum":"a6169496877cc767954f006ca67a96007c53e1f1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FDCRA9TVsSAnZWagAAo78P/2ZWx1OmZQ38kVhITiLx\n41E2JpuyOIPv3aw54DszK6b5kSc6JZgcF06p54vcLVD2AtkjuQL6F3gDnBAe\nsTSpAlsvP/ozQv6ppLZLeC+wk/NP/LQX0d7+SFkghpDrvMKwm7czXkUoJIzq\n48hk1HApyTIFMNG1Q0F25KC5LWBwqSxKtiGRkFQRwYbC63IWit5RupEjl2HH\noo1Dypl8hOy33SOtSuj5gT/OdLHpuPZ+rnYmPS7C7NEZJiRUk9V6zLO9+Ltn\nI4SOpGePSnI+0eU48EvbCwFw3nTGAUZZKl0waz1jCDcdSq/c1qOJLZBz/xP6\n6phexmj4t8YAp1YBrxL01XyR0nF1zCusz6lY4GhfvFVPJtZVShZ5wCDHspRk\nDHH9UVc7D2g8gOSuukTbXKc1G91UgiUGLG2hVipEVZt8VezIG6Q/dFS4aTlf\n6vUpFr2gg+RLAiUK3eWRBvAtDc1NXK+n34tka3y3HsqW6bU4D3Ka0hYXlPTK\n84OpSoMSHUps6ZipTvu7IjFpqiRKQaqDgRjEap6QQFf0jQAVxauFt6YQmVrb\nzlSN96k60fCccTCuwxfLG54K179BJni8+I9Z3SMHuZliQAzYN5dwQsv8M6JU\nNK5RQCptlCzRceDZK8Ft27OUOM0CkswwW0uUzYHIvh0wxoFa0zqtIp2ptZCT\nToSN\r\n=w8oB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC30rBj/xuCRzEv1RyYz0Phl8YqtL/8HGk4ZDMuipxS+AIhAIVStXXNzYCXoL8HzmAMywrCMICoBk0lkkiZ85RYiYOj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.946f5563.0_1611362626889_0.1579852805786368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.43664f0e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","@material/mwc-tab-indicator":"0.21.0-canary.43664f0e.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.43664f0e.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n6BORaIH/wto+6yJGEcTTA4tmzwRY/BWIRX14+/5/7TFw0XNOhByArTnLVFB/mCEKKecZOqM93kGpy5eP2CARA==","shasum":"f575754dbe10aa59833cec4c2bceb1fcd3675134","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jZCRA9TVsSAnZWagAAChUP/2p/roNIIPvp99soE7Gc\nXO+k0MOGaLKCvGs5b1WWWz4tU6Mb9SSkyQbfO6pNhR1TBN4jVoqmk3awBlId\nKTB+k9iBX4bHD/FXp+/g/HYqnSdrt5ScUMbfY2kUIZaEKQK6xy1DAthEM9FH\nrRUKo6XRr5olx4GbfyAiZyV6Gm1lhDiEnFtf03CSv8wIIZs3SmGRQqQFZccP\naFGbyGl5hHLOYMXFZCT+4QLL1Tm9xfsM4VxVC9TiFsvEtJzkoN790cjqGbuu\nWVZlX4p+gEN9/a1L+TCYhbDlhhJR46DUCHL74W7lDaNI0Bd0c0HgkyCkTnio\nMMQ4SijobEY9EunmYyn7PhJDOI45cmr1CN35viWAEyZ7GKeq78nnZTlD8CYl\nxCQu5pPw/j5c2YqZ2kDGp6yK7HJbSfSb+lgUkqq49DCO1obc64L8aAaJLLZn\nLK9O+b2Li6riXIwE762LXF+g1/DP86SxxlMgPGi/EncS4zzD154f1DAu1KGh\nvXwEMelgvIFZsuB8WEq0Vxyss11bwU4MweP6gx0Me3Bnyy+r4etkhJPt7e69\n/Firr8HrYbRkD0eCSf1RJgvaRI1jxWeotOUA2+nEQJnEvdSCuyFaVhFyanDf\npsFwItWs0oQuUJczy/lvNTw3XJsicU7uBGyiu2qNnJ7SAsEi/sf0SvDtGFHM\nIY10\r\n=Ckde\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0G+L2gQBXj5QmtEC5WLkrwFuyia/ohANaN8RLnJloQAiBZqmQ0kpf6317aCt+DEDpbDwhaFxXyDgN+oSlshc0EYw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.43664f0e.0_1611614424754_0.696735141983283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2e769e3c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","@material/mwc-tab-indicator":"0.21.0-canary.2e769e3c.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2e769e3c.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6nfQSED5zIqsPMapzoEY2m5UoR1XKXFDYcst72GspqsVS5sixaUNl57P6QvHpdfRkEtsAKRu6sEP/5pvY1GhdQ==","shasum":"7d52a51d3badddad3ad724df5133333da5b504dd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10HCRA9TVsSAnZWagAAiJsQAJKVi30WSpi34Vt8XSjV\nvfm0fosaafDCIGSp6I2n0+193GcS00HeLWpdGEVNC0kFD0Ndtg7yvE9SBkPB\nv78raUqzTjYii774r9clTTpK1QbZqHfeRka2K+rHAFbS3yxvpId6CSFCN276\n1KghOHh9tshySXTNLNX04l3Ssn9TWzS2A4ctDUk7g2SpnidCYz5RyQ+r0II0\nHRW/QmmuhyH6/ZpUjgxitLtoDENzKEGlMtElakDUZbOP+B81814G+6NtF/ME\nHRD2O7HXXxnEz42RecZ6Oif2EebDTEUSySt6rS8JNWV9PFGpEh0FNN15cNpd\nb9rKHsAVVlJPjQFm/IRUKPoDJVTl1/gE5tz+aFquKl9KSbuPRkz/Emj5Y5xL\n4hhZ8vnHkzf8Nvz5sSSmVzxRMFQl4lK3obZTzmEbg7ptyeiDTgFPMjLk/Ddv\nHle0Ymuj6bFISKw+qdJEYDeLqrAZAcxbQz3uf1jq0apaD7/WkgKTwNsx0UgP\ne9Ttuv1DLlujYUCMDQ19yXuGmcgeQW8SOf/HLAsMcb7yxedjvCTOFalRMfR7\nip4B/CliCLwxQipZ3apLHXNnyamfLX9gNUAjpQ43TD181wWwj5s/D2yR7k7f\nv6dMrFlCVLSImcBOAuHULdLcOPUdfVtIrzCtW2hqHq0l966iYxSRCzEBL8LG\nEo28\r\n=elKD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPDpIKnQNXvMgiyX47hsZsE6cERBUtKvcywHz5Ni6EpAiBCTkLyGuoEu/7ZJ0LMwn0IDWnkacGpVVoR6m4PCJZUsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2e769e3c.0_1611619590666_0.4041608303656643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.14e01610.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","@material/mwc-tab-indicator":"0.21.0-canary.14e01610.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.14e01610.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XOvBh9X/m67GJ5Ga8dwUjatxSH8MB0knNFQujAZbenTN9wqICf/nzq8AXhDctleDFiAs5svT7BtW2+gDdZbbPg==","shasum":"17811cb427b14f1d9937751b8d36d8bab02384e7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRSCRA9TVsSAnZWagAAx6AP/2R8WT5tAUt3/J/l8wG+\nrhaNUmiPCuFNc1o1qQVItNIKcyZoNpS0Uf+Y251dVQ+6mD2CuM2mx7nOA2cL\nscTug462GI8VWs4O94OOE5C5C2XxNwaUBhrdj6tz1HxE+0MO9kNvE71O9rNF\nhckFE5p5eK1rt2RUmv/Y3bxRFT0PFE4zCe3lMjogeAWKOmkcf0xCtFxvU04M\nE05q3MES5b01/glwrH0Zvj5R+MhieOfX1ZkDdzZ1w4xAi5kRQxmr94A9IvGN\nWjNEyIcatxR9CCqwyTlHgCICdMDS7XEua89T5GRTosS2W6l6kjXIo7nlEcXR\nVrqm/flcd/Fa3DHlEMEX4yilwXieifopJxIms+GjOsGfoHFHmqm+P2rLhqHq\neSgZnh7GB0pmPf2kU4yLx2Xe5ANSBYFQtDdtsSOcZdxi7ZSh9VkuzA0gJW3P\nxn8KqQ4eLr4EZTOJRJ4zXS6xySwBYfYVBFs090gqEhCwSRdTB/lXU/YjThGj\naMVUtHLjJP9mo2DDrQfbpK8UMgJy3jbJZRWLPmpqwFrm+ip7/QqtxA56PNTd\ncZlGWZG8ZvoPPseUSRaqOniP7V6yLwWyMukh0CNa19x42rF1TIFixOQtU8Em\nf5ltJzwyIBnOB/TMC3BJThyVr3g9qLc7bGjifg6S4ZIUQeI6+7yGZnlplMdw\nxojP\r\n=viHL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwmpPzq4Vmri7oLgBWNyOQtwpNg4XDMqNz4rreLi6nKAIgM2zh3410ysE0Q2itQXW0c8OgSy2Z4Ao0a//efwmWj14="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.14e01610.0_1611777105922_0.3074081320135502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5de00c1b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","@material/mwc-tab-indicator":"0.21.0-canary.5de00c1b.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5de00c1b.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n/auYLfA0a6+eRjjlxJEG/zTISBVxqTGGoK4fM0+drTI+Sz/vCF96XUXFhj1dtq7os5n55xmbP9V23zaHZcZYQ==","shasum":"812c4c2c8b33490cd32a01eb48ca0c6a41eecf53","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpWCRA9TVsSAnZWagAAIVoQAJuP6v0nBg5Ly8Zpg5qV\njTg1bmVJRHhwoG/ggSSmBphdbHYLqWpaU6lCd8lG6PsOw58G/ztWKZkS7Uti\nSq0Ybsnq/Ak+vO2+RUMHoE9Rh79V8tr78tILws8QDCekF3p22rDJIZC9HKBp\nWC3P12Y9b6KoYo8fnVrtri4V3PZFjwL7C8AXRiM+mQPxxNqGcM9LPau4eH40\noIJ9CrZrimBLfndFAaYHmJk/MwoYxHoyJTT/TSlUANGQqCBREyyWMC9zOoA0\nckETuBP+3YF2F4nOr3hK5nJDYbeJpe4AZJ/2BXx+KGUYN8fXBLffp2gjpv59\nHKxs3C1T1xJ1uKD2NppmLbNvz5WcKrjU2xEcEQhPzJvUhfjb5R145mc7vH7q\np+fIOFpHzV5z+BhHDyV9e8JxAlMDBE3kbV2Le1/+rcoMiqdKQV4ogatCzw1+\n+OEJZfevk+54Mu0XyuPwSkc0eAPcpK5xjv8fqlA7D4fU3yRJ7hXwho+96UVp\nIzRN/QRtYNs9TYiHIFFZWvNecxk+yXSTjhGoPdF9SOiN57y23GXs98P5xpsT\nc21GLRb3f6DnX255w2rqATc/R0Sx8A7MBIzoNXWnL8hf4O4aVwjnk5Cz3oM9\n965v+PRefOjwewTFjWMkycMa4iTBezDz6FKNh+jcPZh+GfW1Tf+/H9vbfi2T\nnecr\r\n=ejxK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFR7fsrb9RMWmgegU0G4V7ahHmeIzfjpadvebmchnYTjAiBrPchdkYv3qNVJE+X/PPqKV2orT6nIAFXR52lnDUR2bw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5de00c1b.0_1611778645609_0.9164235046832072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5a328336.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","@material/mwc-tab-indicator":"0.21.0-canary.5a328336.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5a328336.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-mEdz0H0b1A8gNhXOT0diugKzlRFqDrhbrPCuVOFqiscYRMttSae3MrfAcC0Ibyp/KIVzgh+aImTcTdddLZmFIg==","shasum":"b4f633e8e2c818b708c114a60ef63d1f8a46f077","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaRCRA9TVsSAnZWagAADWsQAJ9UT1TlRHvqMaS60YnI\n/gMtpjS1ATgDD3NQQ/LtUPhJf/5MtOWP7WRi9MzcaDxCslh3QTGuPj78nlfo\nfEF3zCPf7qtiGYcEbYZqzcf2KuaT/pjtRfai8Owkpv0uQ8atPavp4ZzI8Xmr\noH2bzHlbxImiFpZh+B5QQKbg2GsdWvLEHSpM37QRQkb1ScS/76uQGS8SKdJr\nFBEiW6B9bQLXBmzcdyMVSh8nc2CQCeYpR9DxyNWGdwCCKccjFRqLQp8LcgiO\nXoz9jiCbU15HA68zFqQjWHIAd0W+W5g42WaDIE5V0pVrGDBUK2HIJVL3oYE7\n/vAzLjVfTzwMybU48+Sj3zxZwwkl4KoAb+KEfHqwcMkhm7FWfY96Bq/REaEy\nqCpQH2riNocjPg8gJmKjdJF9BuT6chnPjryOR2A3ss6ofFFBb61tlvpCxfQd\n87dDhCpwFq/cKtmxyCSUGP3oUuzOn1bo9FVQdD73R+KWX2PV+A7U22VJjqsS\nzrJQ7pJ9wBV7H2kOm3YAxBqzt1HfybfIPb1XlbSSWJ3mRF9eJCIcvuiMzeM8\novTeC4hVQcTXqapTiMny2G/lxyXdlI9ROh2E0qYM0HzaoyIeqU0TDF7amQrj\nL7KY9+sblMYAAxW50rW/uYyFkAE51nfR/Mf6Obcckfe38ZPmJX17eSi2UQEt\nLCOl\r\n=3od3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP24vIkPp0E8891whyCSSioNXbuAe1WAtDtF+GCHQGAAIhAL0FugDZ5f0hCO5Qb6UMN3ZBgofR/lo0LNvwc/IsOgCA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5a328336.0_1611863697540_0.8747585689435327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.533b1251.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","@material/mwc-tab-indicator":"0.21.0-canary.533b1251.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.533b1251.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LPK7B17X2Sqeqo/Wxu+PMOCLjd10/S0ZJWTY+WiIv3/uNByOa991Y0kqFhap+melUFiWoXU+j9XQRCQXgbwOZQ==","shasum":"c7abf3d3c82bdf81e864ea0acb31535e9383aff0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCW/CRA9TVsSAnZWagAABW8P/2iW3q5oiOr1WYxzuyTY\nrPKL7czCbgPsk/ypQNG93nsUUD36v4TqIxSQb2qcUHJrmdPz/YzHaLPc+Ir0\nDleoeJe2+pAVGKtibvIH1MWv3epD9jZrsf9+Hcq8gt1yIjKw4fdQJbZ8YmNg\nvQHLRm4YOeYJWUehQv453lDvU+nmzRofgyyGr1XDLf2jfDwyyUIYD2ZRs0y7\nrpwBy2vjeW5PuprxnCHjg1KUAavvGPy1F+gp90QbVg9hjQNTM/yy4o2AkfYh\n7SNxJbelZpn5/R2MHTN5GlESQ8FHMvOD9JhcnsH6ZVHdUEaNmdmLwTnJJ6er\nOpeQIn0wVhYz113ZGeAhVNsKp+uqpKqKLIo4HT09kLB/xrdLKHuxFqxcZWZi\nvCbjv5NbiH+xLrdel3n+LcTSBDtvbYrpfItNoIOm7kaDsWm/kNWiYO9SMI+E\ntcphpiBLucQmM/OcnedA+igu++pe+SS6hNbg7NfG1nPfOkISu9MbEW/2NeG3\niYjJmrkU0ihXka6nVODX9TBE/Y1rvj+jUcG/JTfUSAMeNWWmuRWUfGxnQKYh\nYw6+8pjmtEF36pF7Hb4T+wEEDxLxJ+EgG6ruTsitF+cBFOvcJJFlPrew7zMR\nHwB59qLc19TUNC1oOSLahMxl4tdN1ixUnG6M8u3GCj6PrGYcq/q60MZvNbVm\nKL4p\r\n=nlGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtTgdWGGINy6+JkX0WiF4ItnwSzeQYMtVHQsvv28krRAiEAgACB7KX357C8PlNdMBLHjHbC4fQkzPmsbNGegk3VU80="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.533b1251.0_1611933118639_0.5424276374693136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","@material/mwc-tab-indicator":"0.21.0-canary.ab5c0a10.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.ab5c0a10.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-eF6a1aXbbWLPg+jsGuMx7RzlSTRXa1WOBKFikBQZROEfiqC4QqsI3aFQKdbYqtQdQQP9mToVtbXRndYRVSG16Q==","shasum":"3d8b612038f2951df8eda51619448c10e2210d58","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNnCRA9TVsSAnZWagAAgJcP/jkOt3rPtMCRt4CwpfiK\n0K0WyHBI9DeLF3uZoYnxt/rDQ7tmDXQL/9Iugoq07E1pJGKzvGyn8o8k8Q/b\nhsH0jMsq5gtM7VPeOu6/WZfj0aCba2dt2BDFFtDjBMjfn/1L/hIY23gxvuPl\nJdpHTKLBW5RjCOBVOkfNUU4LPF83MPxUdvBlH8/LZJIJOQj9BwRFgbZ7G01H\nIYeiU4d26JFVu3ZgQsLf1LUhW11lXHrk7TKjC7c0eODQ8YENKfSyJqiZrB7A\nSVgL+AuxWUBBqTqheu9npXdemEKca5WZeCef1a5rMV/rTH9zw4vqypcCwltz\nnGo9ZeauOaJwtN1NI/ppdlwc2/T3+SUdwUoRDQFzVixRLyBx22OJ/8ZZHJWQ\nEK77Sms4zwCQzFFmErMlq3YotXDwTRGHPZBGWVtyABwGSQbnvDtNmxGafYez\nckN0a7YCP12yswABf6R0Wm9sM9dA89PCe6gv+2BU7c6+mKDItaqc4VddoPCS\nKXWH2YWJaB5t520CmPx0xiETfzwS0cwWq1J20KJCEAFlFr2mxBdhhoGaEuVG\n7CeDNW+nJ3Ap9uQcKdTjNTyrnXbNbNFZtjgTyoCmFqO/YBJ6HfAWw7oaeiez\nceZpGOoTug9Us4Qeyzh341Sg8RqFoG1sahHM4TVj5LnntLO2kItzcQgi2W11\n7lsI\r\n=So71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAHSBZ9XoETRrfr3DxueHxt2KBjduyCwEFAa0f1yU6gwIhAMAoPz01sKIG4HOhf2G9SOoxDYelq5Th0cDKoVnE6MC+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.ab5c0a10.0_1612297062879_0.2689337896656381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b7a40b27.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","@material/mwc-tab-indicator":"0.21.0-canary.b7a40b27.0","@material/tab":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b7a40b27.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-WJrcBEyfQW0MuwxCaJnk6XaxmRERQgOsRSOnquf/QGvAg9Re8eRIIIq666FN7Q4QOMLKFbCGZrNg0MG2THkogA==","shasum":"8665c8bae2f09722b9bb6e4f9a3b45ad46ac973f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtlCRA9TVsSAnZWagAAKlEQAJjSi+lrFinxZnJUn+Nv\n6rSo7tpPQ6SQbMiWaq3jgCdxNaaVihq1ivvoDkr0CiPGc1z+rgG35C73w1GI\n2PswH7H09g+PUqhKZvuKbyEwPzpvBe/18zfDSgVf1iDO+wbgkFrYIGr4Qq2A\npydL829amviRfkI7oPCakX3GJWYnX7t9uYV7GNvL78ywyt6hLEmb6DSscetB\n6sBydWVNncJ7XcKV6M/j8cUQV1LLgXhgMiP6hqAsaZIAbVBDE/TU5K1iNVQy\niSW3Z9i1doscei0XpgjaNSurdVFGoZ807q2prLNc8M6tGNgCGbwNSnEWt8DK\nncI7er7QXVKdZ35LnD8JwQ8YKwfyTNXLWXWaizTDb0f1f3i9yP+RzxO/Qvkw\nQ3HzGF0L+4HyFss8vOz9TKgTWw+eC3izPuPfFrHAJ3t2hvSo22FzbM+Im/qt\nXOpF86r6OJuhOJYpXKsjK6P703RuM+UB8M6f8XYnb4kvD4En4BZh20MUPjP5\n4NAHw7aGH+84wZo4K5zFQU3FApx4S0A38oqgFdn6VWYJdo5nPglT10yiQGXo\nDdGCaw3wor6nlqmgM6XPTiF8K91Umju6MX+igwGYwDUYat7Vs1d/5HOQ750W\nmzExTAVzmr9aKhkYn2ZtNm6VTWPstmBREQL4/brIf8JGLRdWbDVD0WjpbQz0\nRdAW\r\n=Gdqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXcZiigUj6/jSPGli7eM+HzzdPF2cWgoNFDOyiamLZjgIhANNY5hzxmRgWtkjmuf2gXyM1S/bL5+aOowwWc5pyP3QI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b7a40b27.0_1612364645497_0.9185050036279303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0fdee204.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","@material/mwc-tab-indicator":"0.21.0-canary.0fdee204.0","@material/tab":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0fdee204.0","@material/ripple":"=10.0.0-canary.8e66dbfee.0","@material/rtl":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-hHCPArLxBdWDxI7sruvGEDMNizy0H7QkfWKbRK2V3kimW48rCej6N9kKivWYChuaZyJgvrYFjzOjov6F2kPCPg==","shasum":"f1428b4803ea7a3f750f9d87cbd7d676704bd376","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":65693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyvCRA9TVsSAnZWagAA+IgP/1JP3odTQrmdebZlvxBX\nCsO21OzvDGTYOZ5itm8p/gQX24odSri3panK9eYC3wUJqwtOATZeCatkH/27\nozvknU1VJ4kC+tPW/W/cYWj/hrkRR4iQUC76i7tNiLCpg5GBUbPc942O8F/x\nyhRvQ7qg3IbeOJ3W96wmcBUmYSZuMRkRY3E1PpZGXxUgIMrIEd8t9ROxiQeo\nWvrqTQOaX2V1u4nq1Yzk8KeMit4QGoRhg8hrh8bsIUF+v9zUSkFsVIX2PQx5\njM38D69cF0YrG+8Nftjzck3Unpt1UtJpkHrtpGpRm1wQSGdbyN/VVXDUO5by\nw5/Woq+dKOS+VZAVnFmr+2796ZPJnJzCAq369cDeyWSRw0LCLxzqXyHcKlnx\nFjGkqclc/yo9mMU+R+ZQFIv4svV6zx9HUQ/fS9NGMjswTyH6vE2D5tTmKwDr\nDxoQ9vxdWaoMf2uKbxV/xoQf3vZTXkoyByL+zX2c8+mJWJ3NLjp2ki02bUzQ\nP7iSwtdDLcihgOVikGqZnQifmxMvNGb5VZORwmbAY5Jl1vpi2eZEKZ1gx03S\n801jRZ84Ye+kQtsRIkRRnFkCNbphX2wMkxNmN/c5kUbfj+JxgeXcyhYXlcwW\nNuCRt829LLxnv+0JEnrjChvGGTxucIrvJccQGCOfR5UQKk9nUkjcdeGwpSNs\nOrTQ\r\n=pysR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7Y44JhniBc2l000iHURRM54HVYwXgpySW+fgUHIQpvAiBJkMS6VPmqwdk5rNgFFlTuvE0RQOoOBCai7RjPk7rcgQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0fdee204.0_1612377263033_0.20393599229067183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5160e548.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","@material/mwc-tab-indicator":"0.21.0-canary.5160e548.0","@material/tab":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5160e548.0","@material/ripple":"=11.0.0-canary.b5227247d.0","@material/rtl":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-/ZaJ7+G9UCrHNW8dqh0Xvj4LKl0I3oQMjkD4Qh24iirngYchN6w2yGeELxoRkNS1P2X7M+b4qVMSq8AR88EhdA==","shasum":"54f0c2d591f9b56586379315e14a480ac1e77ad4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoGCRA9TVsSAnZWagAAc7sP/iM7G3A1HO04qhShI6Fb\n2rEN9t6i4k/i9V2Mxn0mW36LOu8Ek9ePetv5kIcuG92hGf+a4C0SPw6lTEgX\nYU3WgopQ/ng84i5Y1IHPcFAD+1jKnv/n8CS5zqH3O4X7rCY42Kb0Z+pklcPW\nHq1Or6b7k/m5ip+tKZ5AKjZS18Tnt5bgekAyfD/UdX7zPr2n98y3nRc1NAH/\nwNxCJGmawrxnUf3HytKtvrTK6y1SZ7JplWfg2tcX6IR+h2Fb5kM87lDKhe4N\nmfvpc8BrEUkAu3tWZnER+cTNYuJPFBYyjSKQlpRh2efEZRUeBexrPncracC9\nocaKPIl146uDRzmlsoXBsJa4lLvUxrX598M5prnP7clGNseDpbwvlfhszA5t\n0BQDeO3hSccwa9NeGpje1NNOH/ir9ObD47/2EUYNorvVb5zyWpdHbc0VClVL\nev1POejT+F+yI0wzKWzm4PgJdRE0bOXsliMITt8ZmA3yRUI4vVhzNYGLei19\nDjJxW8DhHrz4rIeYdJSP/oSZ4ypSPQYzntxhJaW2EjCrEzrVLBOjpfkHRarZ\nvMEr4iTv59Qit+/IDLPA/6dc9tsf3lz6FFuVuLLvcXC/UnR7d0ZwXwmEK0M5\n1LHmvWPYIUnkaJWwI8VaEdtSIbjxdZb5JGqXK9dpNZ1GOIoE/mbM7cSKl/3d\nb3b4\r\n=S3Eg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqKpL03LUh8SFdSwO6Eo7FiwaxAgvqGj9ForZ2MaYj6AiBQ+pzCKliMDpy/Zpn4Q4ZEtyiwqCkk35zIyFQ4yzalOA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5160e548.0_1612569094331_0.4807589291839667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4fa2daec.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","@material/mwc-tab-indicator":"0.21.0-canary.4fa2daec.0","@material/tab":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4fa2daec.0","@material/ripple":"=11.0.0-canary.aac8f5d9a.0","@material/rtl":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Vvo6X7uZ49KeQjx4HOpkqVwrmDeJtStQNHbR+8GaGOeJ3FhQMdog91ExGo4H+BLSxTS5BsNKNTKn3uuQMhFyaA==","shasum":"e0c06d10fe087b92a88995a6f89cded207d7532f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdT1CRA9TVsSAnZWagAANEoP/jJIpRL6YNVeUNFKueFI\nHUUENUWe8+x8w9iiYw7wdstjUvENMDldj0EcFwBoLqSURioo46F25b8m1bR4\nsnJIRFErvq9l5+NEqc14+KiFedRHncwxSFaA5bj3VdHjNIu9ykykllT/1wce\nAyYusw6DukKK8+NIbs8zoFehIOpym2PKsMS+BKISNnRyP+SeR0LzJ1qxmcAq\ncbYz3pVEgcDZZmEPYfs0SzEnIdEcrw0QAsOmKTwVEWvdDLFdtOHoDv+aPyzj\nyEiCFEAqlalS3MQ7wTxvVl49slDR/IBXMZ2szTWc3iDaW/tSXkqg3qh2/Mfe\noAEo81Rsw2lDb6pdtw4AuoxW3SeGHMWzR3GZEAsYAURKtB2tb2fKibc+sUQT\nT6xJ/dEbfR7kZE6IvFzIIRyTIyNLvFcTkjlhb8LKiq2IANsVLVO0Ga0qYgHl\n23OmBp5mvLfNU2+APmElWiOTVlknVj9o37HppBTdhMEgZSYsuzGqNnRY/y1H\nv3WafWMpI7KE1erV74/ysHVZGfN+LrUVVikc7E++0W2rVUnQ84BvcYTlNeKK\nGAPktO37bUMwQ+4kZjOBYt1E4nMIaY4kO+fMkW3/3mfEais/UqbwRGPQmBRI\nkz6HkzyEUG8pR5RYzEuuZSnVoqATFZBXOXbCZxzD+LYtQdm8txph7ZAWRJVd\nlhp/\r\n=kGpX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdyAUWKcAB6KrCBHmWXfboUE8Spn1w0EwqTz9bFPZpbAiEAn5HvAOw0WpjWdIp97kFx8UbwHyU5cyCFKAcm0JlZwAs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4fa2daec.0_1612829941075_0.8235052812393047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.67f285fb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","@material/mwc-tab-indicator":"0.21.0-canary.67f285fb.0","@material/tab":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.67f285fb.0","@material/ripple":"=11.0.0-canary.750e18fc7.0","@material/rtl":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-8aWU0pwxHZgFdke/ycUWF65LVsRqTpC2NEbmEInTxLrYvyt2rd+2ACrfgnJ94UJoek2XHPj8IIuYi8uKeMUd+Q==","shasum":"675ad7a37a287f2dbdbb87fd38bbb41c803b3fbe","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyMCRA9TVsSAnZWagAAteoP/A4xqVviKjSiGc5vQlXg\nRZ7+/tPYjX0Is0QLKh7oeWSqVui2vNZw3FOzfMsgTiB/FZNbUWnQu5IE5tdb\nxLToISKlyFr4JVOzdWd9Yoqja1gze2nSKS2UZ7AbKNNF4RgYn6RUXi3EEK1G\nm6a7npvGK8EyTUkHK70NqtFBQbMZyDtb0mxpgFnFR6H9l1MBYc+5bOYMRlDO\nAxpfw0kr9eNp0ZrACJiWrgkYQkJeaIYjJFvE8HZHaT13FbB2W9eVga89pASw\nMuH3iuaZEgORUjyESouxAB9KIm90Iw1NFg+WpWog0P2XThIiz39cr+GhBEqo\n2VPm4Fa4zh8WTJxSiEbo14QRW+h36RUorbaHkxzwWF8kxxGmfc7ACIjH/Tpw\ngUtyIw+rsMwy//zh2P7EX1q5kei2CVOgRDRmuZ596nTiGHiI4EaZD8OruDvj\nQ9NxQNns9P5AKPdQaS93ExXs0X3SYKl5NAHTXTCFrRbjKpchBNPM3pfn/iCD\nPGOS3QjIyGbPF86AUaKCzV0gRjXQJCTz2xHo+ryM5NF3G5iXeYxi92bb6Jq4\n2tc2N+eDQHIEg7sgkNOw35MzHSXHiBq0dI77nHz3TSNfbgU1+iIFLgVU8hKe\n1q3/4SKC1a7/nK9/1U5k8vWKbqjve6GrlfL1YR2mpOzt8o+WCRk5l/3LinJl\nurwZ\r\n=UxPI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyJ9SbESv5u2PMGgvspxtNYMOV38qY5x8EkOuDNA++PAiA7ZdvVeJXg4gINufuKmdpkwKkGcSNo1zR0LhD9/sK9XQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.67f285fb.0_1612831884291_0.32320591262394305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.58cd5a70.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","@material/mwc-tab-indicator":"0.21.0-canary.58cd5a70.0","@material/tab":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.58cd5a70.0","@material/ripple":"=11.0.0-canary.b62b1266d.0","@material/rtl":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-twNS0mTzVqYl7+wsYL0WlzyZubcZo8lB4dAu10JIGewEEI1YXinuGRBp/jq8VQCbvmLuPo3KS013p+bgBQHC9w==","shasum":"edda25996e37b51bd98ecbcb28a847af7e70f394","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdlCRA9TVsSAnZWagAAB3IP/2RHPvqhRwHoQ+GIALCa\n6Y3Tz+JmGDRYkIBJl9EqT3/fhkJg6uqBeHH6m2/2owdwfqSLMqrrZGcnvtS8\ng9fjqXkIGxkhFzwtHTDT+djxpnXyZtwJpNu2HXEeWDI5N2ZwZ4flFJAkGlH2\n/A/OuVLbUnUJO5cw9qPbetmA/M7M3127M0EZWsUo/el2pzrWwVqHMYZFobvJ\nfa750NYN5VVvoMXstaFwDqLPyYH6aOEfl9X/rlaj05Rqvx0LMHY6aDy08nn9\nO/pdUC8le0D9C4jGpUr32K5c1FeEBoTv+RE44hrC0OhbFxvLRsWcLA6pfNmd\nA4h/tjv2ImaZxI49QKO4ui8pMVg+4P/y2rBJWmVICWiApNv6yEiKfKjPlQOR\nkEEh2ZA4iUPqC1EaKu1jntPr0hoKibAPdPwHU9RwsGOP/Ui3bZxbXpmdmQkS\nEz6/4NB5q/ZMMDb2AZwLXB/oNyqIQdc1vNPec3gp6dfnY4Kp35G4VSNCJJuK\nPGGWFR6LNM0qMBjw0/igfbiemHC3lJ17IYqTnbKIvjrW+kNbhJoeIPSZ9tZ5\nHu2gEDEz8IwOU/OA6dfVnd4tQ6GFqHXYjUOIoJvwNvMETTuvAEGYwxgzVm+1\ng8AGgKwEKCN1uFDkocv/MeI7O7KTXfJpPkhFA0o0EKx0BXylDrPnlZ80S+/9\nm+nC\r\n=xhJ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTavlGQCtZ9z6sxSZRvZ7e1YY57BwZuBp0X0iq6r4S8gIgQcMcUczygqgnIZOUinmJNCi4OvIA+0mn/kPVVIEPCt4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.58cd5a70.0_1613076324800_0.17564904625163957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.8107ca43.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","@material/mwc-tab-indicator":"0.21.0-canary.8107ca43.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.8107ca43.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-5GJp9I7CnlUmc33OzKiZOXUs9XLhGuCRwb9P/OYFMGwoId3y3ChuiyShlScDJgR85t2h0Wd2CfRgtSgDluTbJQ==","shasum":"d8a27a185da7e1aa20bc7ab2a7a73b203a3fae85","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3LCRA9TVsSAnZWagAAX1wP/Rtd9M0gaG2uWvIef5sI\ngmIzZ3EeFcHYrAol3R7PQ2lFjBNnMOvp4Y/qe5xGpF1sc8FdkpWxZP2/J6uW\naJ1tXMDv/dKzr8vAR9fQ+lFKE30cZYgd06q0YEOm+wNcx2YWqAFvGSk1CPmA\ngPQGDs1PQC8Xq/mhytYV00+uH+vE1nmqKJa9i0sAXjU2GmGI2ivzi1S0awys\n6jn95d8wtMpilSIkpgitcaGjvEcRBHd0Et0/6XpOhw+GHFS4wQsWnFCG75fX\nth0n3lVtDFKTObMtzZq41JB3Muaxy1bDnkpzA+Oj0icteqEXVX6bKUkWdEMF\nTb3XkYEKqb3y9tNwLVrWDnC7/JSfkl/AGf1+h+kuUeYFWjiMIUUpMd5di81I\nWTjqq2g0PziCnHcvD0RROxSkRwYjf5GzTITawq3D6Z4pBgkz4VzFzkUtUPfg\n1fuhThhAXYrBcGKnZmcJsJlFL0kLsTz3Ks8DNvnEiVekwQolVNNU8cREXZLV\ntZNOyJuhiShAdEMbSPdgfI0Iz78OWf7kKGxQDiocZoVif7eB3Pp9rnhQ3keD\ngxY2pw2/2O5lV2x3/aBOK45EZqIg5s+Lpfncj8uk+1p6vEkPB3kt3hhqmFfi\n98b+acViCOgXC39YYmORWqjM5jysob9r002ZCoQbvpMdSW6WTyeb+sVRfJOE\nr0XC\r\n=PCrA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYSFLlINs2I8MsVc1tj/8Y8rEstywOzcgdkbWQK0Xr1wIhAJHX2jQuJqSMygTlLGyQgZY2MHOLVKARcer/7VRgnIJe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.8107ca43.0_1613086155351_0.06429028816423243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.d35d64ef.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","@material/mwc-tab-indicator":"0.21.0-canary.d35d64ef.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.d35d64ef.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-AAuY8LaSUvKPR4R6bdfsVrKeQNjrxrDCJYhXBDqeig9IvbAts0Zill+RndzSO+8jce9CxVoHr+hfUHbF8cWARQ==","shasum":"9a0b88458dee85ada4dd238f51d65bcc6ba0ba5d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEcCRA9TVsSAnZWagAAm6QP/RCONYqn4vBGB4uJoxcD\n/TbQlmH+azrvTA/tWOi3x9cADk8H7Z6KA/PK5YMXaGR9jSSqPwsv6Dihc9wJ\npycesXYXI55MdvwBTUBCZVj5Jg8RrGcvHgyVViplGnz/3ODSQkB/vxGk0zfK\nY2oEFWFl0bUBEPGPOxJnTf1ncXx++t8vyfAhC+COP2cLDI2jD4EcDqJU5vvx\nSOmkoXDBFFFFJYQCtlvd6jds3ghVknFH/L1fYe8AfyhR+0eov5kPvnL7EVm5\nVoo38xNdJtYiOhiQ/7gOpiegBqyY8MAFHxXtjmGWHowbGe5b/ObTS4cIVeiB\nSWu0H0DvU/KbQ36trNeK3YO3dje72VRY/avj2/kXvNo4NhZtktwjXnhq78GJ\nr6uRhfZOy8q+EOmqY+WtaRGNJV0+tFU2Ul/b+9CZtfpwCox0CKcHJ65KkAFF\nsfC8jcFkQLagmGmsJcLoLKL1TeftPb0CXP1cMtV5ZsaWuG45ggvk4I/ky6D8\nuGj8tHp2RVga+u4Fm50CLIg0Uf31FKDWkaEwN2gMHbzBeSDlr1/Pux0aH0gs\ncV8gW9W8R/DwZCuiDlO7icmD1fcd5SjuUDUOZuSjdqgrMOgyOpFJ8FLg2Wbt\nb2abdK8E60ZWU1jclOUG8A28zYWVfBAWC7iF0nLk8y5mi/Nx/gsUZcpkvZEH\n2noh\r\n=BKpQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAAVZm2V3klx53Uip04PcVNlOlAU+tUYoqlcJggSq3wAIhAPsTm0y3FirY9B7SBbgLhuTgMkui+02pCCkbo1y59jwC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.d35d64ef.0_1613087004043_0.8547803378314336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.78bcf058.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","@material/mwc-tab-indicator":"0.21.0-canary.78bcf058.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.78bcf058.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-/fThrm68CI168VmuKVYcBWistFt9S+44YleX4auRkR6UyMR7FC7P4/ZFFbBHt25n1/p5SvUQN+y8UfzWi+xkOQ==","shasum":"dd3de1b819753bf2e1a9413d3115867b0d5682a1","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBnCRA9TVsSAnZWagAAmcMQAJGM0cSxadMfwsjUFvks\nP4LnMq1AxpRi+/vwiaTxRi4YkH4h8UwH3WYxAH+oAdnFgF0hE0J8Q11eoFbQ\nSDBrz+nLtkEzvjv2ZIiyhC20Ldq8Wy4c81HcbvcDK3z4Dw8f1ta6m1wJkJBt\nek3zUHu+LUKFBYAuW6IMQ+lnMQbC2l6/8QxFtHGzyIArkP7/ykWrBh3tq5Ko\n3kqzV2mSZAQLjSPT/FdU+xI75W/8QXig1vmVfM0d5Iclj5AKnapoX1OU5oX3\nIrRzoftbTjy9pFjnviwIaSQlliNj4Zv0SOxwuTTsQWTzWlk5voGiSfVknbeq\nbRaJvc7sPoN6CWInWLWuehJOpIgq2hWsOaDoleKS9mlJ2C4oAtrkm61IYx+I\nlHoX0P+HnJ8PKWRUTVh/AuI1OjK5MyeLLIXxLWMdgwHyhrzY5FKxI/fO9+35\n4JLXu78cpbnPjfef3EG3p71QZilJgRClsZXoZZDirJB0CvqGdWfk9I4iaVOH\nse0fS0PBKGYen7uwjchK9ixqxdthNvv8wyHyr6sMjElhenlHWIgiaJEWhuMp\nqDo8acY9/sC15Ro1lDgyqYuq37nWhDcLo6xpId3729idqtWYzkS8ap9dq8X4\nq6s5PCxqxLNKymx8P36MPO5ge4VvSYQdxhOaXyBHOEA9z8UjTHJULM4q6AYE\n7IM9\r\n=vtE2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9Y9VeRl6N5T1d4Tw11NGZuzaftNTeUkZXU4I6eoYQaAiEAgevtQdRx2LHXmzGbBEQPLrzdbKriiX84OcIbDH4luGU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.78bcf058.0_1613090918758_0.5239317547312579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0c6908fd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","@material/mwc-tab-indicator":"0.21.0-canary.0c6908fd.0","@material/tab":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0c6908fd.0","@material/ripple":"=11.0.0-canary.ed88df700.0","@material/rtl":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-dBkr6rFDb+zbKs45aIWRec0+ULLDD72T2pci6mrVx3GhOF6OHjsXXRhUzCSGOMJTo9y/gHwgGb7J9pBkKznF9w==","shasum":"f85c3e666d488ed2ae7002b7e00ddc680f3150ef","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdj2CRA9TVsSAnZWagAAbCoP/0gshjIbeoNQcgS0LDPV\nRFhXr3Yo4YQMHoFFb0RXcjIbiLBFiGvm06hY0BFcglBJXGAEf3GQJ7/1CfA4\nMUEeT5nWkDtn/U1yWOYki8Jy176gHO26czbmsDg5l8io2ogU42fMU21xTOpY\nJbvZ2+kNDgxIZdhP6sJ/WQfU1oKHW75MbCJEzrvvRAL9RY+Y/g71VEY/qqmN\n5NB/WXhqsHY3m00vlknveIkr13xH1qW1jI4dHZnqfVhfdsAuD8nDy6grCy8i\nBNR/XuylOI+xiBLk6BKa7ODCPAwstFySnAAyRuj2Ch8yH+luedANxOFZfW8n\n98MElYH+9ThiMBBR8xOb6pCTqWj6g+Ok6vPrDnHOvpsL7aFGPtZG1K8QV3eG\nYAC2odsSxfesKgyVbFvqftcV+2t94RbW8HGUjXcZ3gdyFvMCQz8ojRtR06Bz\n3s59w1Zhwp0Ium6Flr9dow9tQgG2kDH9WVYscMKW+5La0xKqtYSaHS6KMnj/\nL9rbaNPZKl2a6EyznxQ5VJQmug02auPtL/BYJ94ZgpbzyrMVl0aFj9LaNZ4I\nVYkxNtqcvjn9qXH6KYPXLoAJParzLNZQwogK7weLizxzcDiBZlNFT1ZIs/5Q\nXrBSwXWNcQ0/Wzf3GqI1PWaoVT3LfI9ysv25X7nIAtfCKrOYZ7rsufRAnczc\n7Vye\r\n=tIYW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0z3KIQvrQJfMFEc9U+RnnAK8iN96TUoGISM73lwE+3AiAIVq387PZlEx2IPgR3XpB1YF9CUFzTMGBRPBfVuW8Nnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0c6908fd.0_1613093109423_0.1727650189964538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","@material/mwc-tab-indicator":"0.21.0-canary.f1f34ee0.0","@material/tab":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.f1f34ee0.0","@material/ripple":"=11.0.0-canary.71fe9a067.0","@material/rtl":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-dbEBgFlGR6gvGPyr7O26K4Fz3SMT6P4e9dYxTtFAMA0pQJA2EINJFSzvl8pmynbqxJ+bTiB8oNhfDhKoRkWpsA==","shasum":"c5d5cfbf83d52d172428ccc00558f6dd53ba706b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKNCRA9TVsSAnZWagAAaq4P/RuxCld17rw3hIw0xiNK\nyLclFVW/3TNxJBK21acEEHyQ51LXWAEzCIDEvgD6oL9XJyDDpajaQ/kiJ4ZV\n475vXqgkNolMFUvaKVunHNHKPGDjCAGirUUffJUflIDXUd7pHWs1xlNHWl5W\nmMogbNu55dLQu+EUwOWydphgVBNaEZIMSSmxfAIifox6hxu8Y4eJuxThClsD\nXVrEMAWXtl22B/FgHMODvMw0qRWSmPKmvgQOk6kHr89WhcTZd+y6tL90hZ+i\ny7VJHJRYht8W4+hnMNKHJliE3I9oa5GguBPTI1HMNolM7LZaw/XnNdMvzi9X\n064kfnGozGrVfdG73J6n9n+7m4J+Axcc+EiHS3AI12jZyaqiPFGolINOMvlm\n105mM/ueFDAaGGZzPCJpKySm7UweAE7t1vEBd2W2y8/c7F5onOqh0t3VYr6P\nLwgdnH1mpJnJ4b3LiGti7qWGaYIxEX6VpPBU3SlcBU6MpacBK5hVoj6F1IqJ\nv4CBD3rGebl8I8KKltYeCAvNw6WI4y+iWP/480KlA8mjZgjj1fZo/WbO6cnm\nxGPvimwI23H3owQPO+Ab1nMJhC4atYOoTn/qjSgF1XzdpaV9FAL0MUjOkcJa\njWsX+LG07NmYo1Qwd1XWV2EPnx5Rm9ImrRg8sXvjkogVGHT1as1cfPICNdgK\ndS20\r\n=aAM9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6qPm6uiUibFPRRtLbqNku7WcCp65JLJih4hiCt24iwAiEApsWEh1XhVyA8ta6gPZjvzDwwQzsg+5UcN1475PPB4E4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.f1f34ee0.0_1613161101210_0.10929726045887067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.d84df029.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","@material/mwc-tab-indicator":"0.21.0-canary.d84df029.0","@material/tab":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.d84df029.0","@material/ripple":"=11.0.0-canary.0fd56a86b.0","@material/rtl":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-LBzAh5slDCHsIjrksurx4NDzY/r0rtth0d4K6weppbOHlyLfVKtDH9KCcSAx/gTyxIQhwuspaGUgQwfwOkrhQA==","shasum":"3aa9985342d7a936a3f96a811b8e0dcf435ff085","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgvCRA9TVsSAnZWagAA/5oP/jNLI8YXVrzj7SOtfXHf\neNzVt+2LIWrEy8qmgkQHd1cF1GtTbqXrAIujtYlt0b14UuhcXC5n1nIzGj21\ngE8XtUA36DnTXKg/qasV6njWTSzVn6ZPcAiyQRsIv7vqrUc4xQ/tXDIR+Is6\nLsPV9qj9NGUPXNg9GwaBE1NM7hh1sRK4ESrDiT3JhqD9L8hh7L6Iy6+EEhK8\ny9nSAVK8UZcTJtYq13uzPIqCVP/Wmfxb4RXzYp6MgH0kwzkxXxvIMDwmumIm\nOCA4nHoimiHUrvHRxgcIJX/+R8A3Zsemy9NXfGZcDcsCg0OoGczN6q1Mn9yD\n6w/gmbhmVjW0xnSR/TMRYjy15fem2l+z3QqdpFFKbnHRb77KRuRRAOk3ChZP\nVtfZW0X9jZh3MXSHNj87a5Vd9hdT7BFumGdFCFF1l14whZfjwcAcjkTXxAjg\ntYq9r0pZGx0lfRRWST2lagTtiRYidwtcVSe7Qkew7Cl4zlusJnLayaEtWSG6\nvoLH7ow9xsQzfOd1kdW4UFj9TtJ2b8Wn11RFVWb1ZDur332hXeWtEzC+Q0hE\nP6VSkZ8+8LQcEb+bZqzXDNyzejTUKrnRXVWsiJ9TLUdn9vf4NeGgZTJdYHIm\ntZK3lEyal6Lr2RbKlQgtIob+0mfmHqqdI/3VaI9UFOxOdlWV/+a9jsyhmx/R\nMgZD\r\n=Vcdg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbRrnuJSdJSt77RpxLujI/uVRriAsMAu4S9Dy99D9NRQIhAK3VMZ1RcBXl48P6o6XILryLghto0jZzi3Q55OSBJfTg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.d84df029.0_1613502510590_0.01124453827522931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c525f471.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","@material/mwc-tab-indicator":"0.21.0-canary.c525f471.0","@material/tab":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c525f471.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-zC0MXiEH2g2s6kD6btTHT9ycOV34EnOY+Mr3aY4nR4Kbfz8R5gVkKFg4Tc3eRQ/fs0AUPubyAerOt/Yy6zKl/w==","shasum":"33b920f785d53b6fd89826f1256761082fa2b8d5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJcCRA9TVsSAnZWagAAwJ4P/2ilcstnVUAngMqK0Tee\nfc8UKGB3KjhFLahjJm6hgjcseLjzThX5Zbk4o3KkEA4pZfz0PuICPVJRkhiN\nS5aoLqSaWH8u5azxylyDpTQK7xt5GlxhdtDQGxgmoUc0UE2WoRLvWq5STSb8\n7vOnRlgDjZdDQKZifmtH0LZT4kyrVeYxEqyBehU/ZCKRceSEWAef6WLdVXUj\n7MmuxJPmywhVHcAXGKw4YXZCwyIVuydqcJQYrF9FdL+S9F3U5cS0pCOJj1cb\nLn5MqZwbG+a3V4A3pteNxzQ2/yYgLhsBaOOs6kkpr/2LmTTuRZj92ZTmSEQm\nHNbJRaitaZg2t1rKk1CkFgXnXiBtwrrVMi0o2tmw875vraz9R2gYRsYY4LNh\nohUDZAHGmLcKECvWm5xjQfS929Y3lH21dbmNcH/Q5CKLTfBDNXOcNmKYBuI8\nLnO/YHqFtZx7AMAHkNR/uPAdlLeCUcxmeVzqDeguH8B28KRuoaDEaoUHvJiD\nfQp3kT4x0QatiJaPFKbSDSlRYIogFdER1nxbz2J/qIDNHDo4WDnzEIKJv4cZ\nOf6G8amWX5v7dqpSECVZj4QWOAs17XgEoeVtkSqnz+2akuZ9F4tOZ89qiGhk\nJozPtrDgjle/qoq1/Y6+2dX7kFxRjBScAVp6e6wDFsHZIQcQHyltb9gbOGhr\nlINz\r\n=Kk7T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc1DmW63b0wXWOkwK0EphI3wuJEajXC8ojonE08Q/GigIhALGyS0GxmH0RHR1S1RT8r/NPCmq3E3o6Qlarg8t5S0aa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c525f471.0_1613595228445_0.5008633548531856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","@material/mwc-tab-indicator":"0.21.0-canary.ba7a1b35.0","@material/tab":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.ba7a1b35.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-j2vCfxfuAhBHCnykmzrZv+HCUb0b+DMBMCoY/3B8bBgRhQS/H08qxm5sT/KswxRtE2abOlq66mtiKb5Yz1oqqw==","shasum":"eaff2680aebaf4fe7d84b9d65dbf8d3dec4a0676","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLWCRA9TVsSAnZWagAAd68P+wYX6EwwQ5Iq6YJaIWOk\nUXppIf92AhQKlfPN/h7aEPz9XLpP3RkldbmrHMgxR+0EwzuG8jslFwlprUaV\n9ozoZzvKdRbl1uv3q8VDWMzPN8ISw9cFZj7bBGX48gAGeOSJlgnNOFDyCESS\nFFc0h+GxAIEuO7gHKiEBtE9v/GdalLu5hIvP3V9OS1Xj9rHa8SWaCy3Uee/A\n/MgiC+K0jl2XJN6R2hV5cqfHitDt5349L0g7uupozIt/8FRvj5yCyzUlvh6c\ndOhk2WZAHpwdZgyWFA+XA2bHMwBQg1qHk1J5FrbqGfggGmL5klHSLWduHmrf\nnYMkEYyGYTPcBXMvB9pfftqu+XzMUSu5S9a1nAH4IcQTjhPMtYqjeKh/wKNl\np48AYYW/r14Wxz/qrDIOkam0Loq9hhv2ha32qvfCrnUucV57qMJZ0+NupaEG\nlRZhbcaF+/D0A6wbvfjhmrCIVf4aURJOdpZJX9fOXx09kvRasPPFmGCL0bVv\n7jGwejdCtshEoLFZPv+vhevSkhrCwOM6XSSmJJOtkKgy1+KwSHwuuHj1/1Vb\n/8ROo3GwWOVLcbWxbAsvWShEoZGyq8zLRzfptEEIG2cjJXIxUSd9E7gjP95r\neb1ppznQNVrY6fkCkbsb8RUL/a721NseHL1Ahgo2RQn3hLsicRd0hGRwGwmR\nifuc\r\n=pbUi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEU0Ixi8I6FesKTYlzcJ7GH9M5L5lrnt2zgihiuW42DAiBX/kPSCtuQizofNTZC5Dr/x74TIWD1ypxFv9IRl4eOMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.ba7a1b35.0_1613693653728_0.8277827850975423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.9a566dda.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","@material/mwc-tab-indicator":"0.21.0-canary.9a566dda.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.9a566dda.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-dtaKRxgN5xkCqb1QCNbbWCJapobfJJOcDB8iXnC3iQlEH6CgSLArtwxOYBxSui998TogfE28aP4IFxAjsVMTcA==","shasum":"aa8cf190a51a025fc6e829951dcfc598891ceaf8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWgCRA9TVsSAnZWagAAMaMQAJ0p4LH6BCrbGaMj/DDN\n/ucYZmKlMHoob07gTOvcXJQd6d70wlO90IeLixtqPaArjdDxPajSy45kiWmE\nwts6a0Vi0CHmKXng6WhuIsLKWhyzSMugPpUd3f/PZ/7qCGyUbsM8HEMKk+sx\nHzX+rYj8m8iz3YxfcaQvm5x0UC21VaL1nLCooYzgIbrU66ec6Z7IxrNFeY8I\nA8fVjQ235La6cc9yxF6orE9F6CpTRvibQZTrq4x/bYGfIvJvDGf+YCG/n3Z8\ncjvpQQc7aTJjCzy7NdTe8e4vBSS+xbAhezo8WeOCwHTyCJ53hxVdvKnJx3ht\nBMRymcgkLCJxHA+hOeNl2b6kwIJ+3lla4zf5zu25w7mOj3Dw8IsX+mHzKa2H\n+RHgP7wy3vthNA95v2iJ5wh6NoEjkTnoakq6ejAIsFVj9Ckg+ufGli6mzXpH\nuG5tpVQXVBUeGt0r5lE2HpPpgNTRiEnTJF1a1eZc/CTim3R3aF5npcdkS5Nl\nQIjLTG+Pl7YaTOONQT046pPM57fSjDM65SHpG7K9VvLMBbcPgCAJ2huGEZUN\nCu/7P7pZkFINw+kqnIMRuN/uSRj1T6q+DFaGMUaEqSWHHbg8MaYeFUhhW+x7\nH4JfRqbXzgJ/9zJB3NKSnzF8I4OnlO30glf2fPD20fVr1Lspb/r5M7pEUeQu\nU+rs\r\n=E8dU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKS+i0gfNVR1RAs4sV8/UQl/MPlJUFUMaTMa2kiF9uUAIgLgbU6k8LLFMZxvTtEE56Y8cal5I3KqTptLsrv69WIxk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.9a566dda.0_1613759904207_0.46468586707734505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.55addb8c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","@material/mwc-tab-indicator":"0.21.0-canary.55addb8c.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.55addb8c.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-kd9BlZbkX1XyAY4h9taVBFHOVmxOYiC1UX6dkEqFS1E+mUUOlYK6IsscIyF1th4ohcVjOu37JXzi9RzTX2XPhA==","shasum":"64ab07af3bba24ea9589cb7fa1cb79a9bf9ee004","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDV6CRA9TVsSAnZWagAAKMMP/Rz4eNqshTliG2e2fehh\nwrISMrCtmWhjtwt/dsvBVxiyxNnmKZNEBfYTjTW36LvkYm5FMh7wzBAcy6RP\nyURLdNkwkM4pHxQi8EzdgJ9xodDCagMBQz/+50VNDkFDvAm/6UP/mDNal/Ge\nbnN1bgGAG32Ma6559NIoteFDgHA/8w0XxXq2nakGVEwSRyJJZ1AHAZeBKuIu\nDQJlkQIUyzO1ICPdt/2KYUEkxtZv1wrt0ooPS+qLjX8kJjgRkqz4U2k2eNJF\nxTkamIyGZVYVdqVf48WunHfCe1K85BYQH8wt+UmDDvv/LCVRZWAMCIE+Ut6C\n8Ggo5pqXkulX5G0WS0APESvfGcF/x57B2zJNo/mjPGcWm4mGE1zG2z0lY4v/\n80rylul+hQshZLlBqJMEJEqjn0YlXV8pDKJA1duY/Q0sY+9t37rCJSNUqs/s\nyQZSj6chF0kdfMfBDTlMGtvtprLaMDIiLiHzi5W2XF1+r26AwmCPT7eZJ/dK\nxF55JYjlbqcsJC2J6xwf/NVo6mUlZzP2CLJ/fooVWpVv9JdDfqAZdrkbnLRb\nMJydYiwi7MCccWHPrnqw3F4YUjawZdudpVfRIvxojVKLBLVbC3ywE+n1cRxI\neyXVEiclNk1Iv3+h6Sr/6wl4HwlkWSWS4b6+IEx7glYE+kX8J8Nx9KYPy9Qc\nk8xd\r\n=4BOf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnergVERpfqz76xw/z33zm+yhaVp4QDnho41nnLWmRIAiEA/xpgcYvaRCZJBZIfX+5O9pz7R0yQKCsdiEKWYabKsss="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.55addb8c.0_1613772154571_0.6684889000481282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","@material/mwc-tab-indicator":"0.21.0-canary.85dd5e9b.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.85dd5e9b.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-PtAyg/Kh7xAxBEzFKTvVF76w51XqgTqc+mOCcQb/0Btwwnb6ESpXDxmWu76+JFo1+gz0m2RagP1vh25GkScXBA==","shasum":"88f141144fbc3cfa0992714e8371f4161ee98df6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":66055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGY9CRA9TVsSAnZWagAAs5oP/iEp7ynm5jX8R7scdItd\nDnlVqgAhQ4WOVQZ473DTQ9mjz8iV1AhQ1R8QiHCkkebevx0cJv2vczw1++PP\nLWc+9eTec7Ba8pF0s42WD6PyLo/3wkMHiPz7dgJ3sURJGXICoUl4UCzIjrBo\n/rYoo0Gka4PDFMP9FSN6K87t+WziUKVNul9RrgY4Z1xK1oDF5HZrs/zNvgP0\nN8wvPkk6EODQHLgA1ir6mkn5nAiu/OASLvGI6L6pzEgwhgvlMFsBm1dZp0ao\n1A9U4ifL0urR/puk+UU5hkaTdaeylcJJeHPyada4vyMaBs+XHTawEzR/bSA4\nS5s2b1iFq/bIO4wxPTdWPjZhpQY6MmGFVZ2FjzKikMXVi3zTaoLp9OtiegoM\nzgttfILf3V/mCTIFaXGDJo0bsuXWvsMR6cvL3z8TmXLd6LRYxys0p8L8XVfy\nYMREbrnIpJprixqORo1Q2+NIJ4I9RhkRGAOWdFnHh8+aRna4ZMNQD8CSkC+k\nex0TnXoc/0hKgPqKo3rw0J5Fp3BRwjtjgwYRf0TnEfQOLgdVonAxy6wCYIdZ\nTCRzf02GKn/O2bbpHEbB5o26GgT+hPPEavqDInhDlTOp6oomz0IWJnNGgBik\n0AvQbSGAfmF+PyJnLWib3zeW3XwQAXzTOyA6l9uW9Pq8Rsns+47Bdv6t7eYa\nSPhO\r\n=77al\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe5dJ7Pb3e+hLSkrsQrUnARSo3DC1Ag8SdJCdmtCv+pAIgbfVFstqmPAA0dSbq2u9jWJ6yoO2lujVXqtWtX4bqJxQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.85dd5e9b.0_1614046780407_0.8547575548058182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.aa3e078e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","@material/mwc-tab-indicator":"0.21.0-canary.aa3e078e.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.aa3e078e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-xG1DOlo75nqPXpxy8rDULoIqWAzhXRtjXIAmVmhtPmbqrCvNJayP7F9le2kK9BgspG50hz0iVAbx7vinbq8m8g==","shasum":"ab9d3e316d2e984ce77827e34981e36791e7d0b4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":66088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgtCRA9TVsSAnZWagAAnMQP/jwL1Iib16XAjPej/8ym\nAo/YW3JCFEdezd0NtxYmt5eOLcqV4LZdTbnR0pE0SOZRbo8lQaESFq2c7XiT\ntrppQi2u/p3sJrEkUKK+7lLJrAtjKR6n5d5SMHz+0mqOQk2lMhHNVMj1vnPa\nlwWvnqbqZugoULmXsAa+CKmvrKpkYY23LbAowm6aBc8xpuupRMGg6KWW3Zfl\nqMDa5iTUfmgqzvY34tQjSylUD7o4T9b2oYCh9aTVghowanyZcfcg58w/mDiR\n9nYu9PgYM7BM71Vy+wbx2jZngV7Xliniog0+eGHCq21eIFzArqx7cp73OZ0A\nDKSLG2mWeeJxsLBer4iuKavi+mZnfMGg4HE9a1U8dLqrwkXhdEuSwHck5zEI\nvEyeX68hC3hmHab9Eit/3iH9iN4dGQ7Emh62ytPeXqw/8efBYackbUfQFECq\nBVbq7rgFuggXR+2V6JSYaaEB2VVLkNDrHxO1EyB0LqYK4IMH2LUNmPqqpyRM\n6i8M9xiYSU2ZmidEyEnZhukA8JVD3s6sRsUVfNjJT2OmQnvogA+eRq/z+h8W\n8axt6+yGT/DFlgBiPi0Xp+MFTD78MdBdzNBGDAbJmxFSZIj/EnBoAfhxjdPE\nhtufXbBmmvZX6N4VgD5ftYCXrqzrJqU+mBGbqcqr2UrweKOgxJHKpWHZLrAN\na4au\r\n=DtHL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj8smYNdc0/q4jnRe/MuwNIQw281LI2AElGhHYscRrYQIhAIKa+/yvRV755X0nLbNOsDicRWXIs6n5gfaruOGcbfh2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.aa3e078e.0_1614100524571_0.9235628496586799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.dccd254e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","@material/mwc-tab-indicator":"0.21.0-canary.dccd254e.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.dccd254e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-JWS0ta4fNtWaFwENyI25BHnMlrsBzy4i8QXEQtFXHjZXU/otH5YzfnZ0Zc22crvssg96GzZVd+2cykk2e2rziQ==","shasum":"f56e24a3654f249f9c177074622026df054cca3b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":66088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPICRA9TVsSAnZWagAAoNwP/RCHvQ2XD9KPzZP5lNO8\nQeSdpVKa1kasVmuYSD5uIZhlcDp2W+AndXcAT5tXUQbKQfnrBhhyhpDmsT6i\notQO/56Ogg/71t7P+iCXwiWJRhYKY7KgHaKpcQ6SdG4Y4uyHNUugJSVfmCMY\n/I27UtNL6R9DIq5MOTROwWIMmppPQHLBre4m0SOEQY4v8HhquGkvyLe+17wW\nqiWiGqgzFeh9UptQujUiU3D+s7IgTQHTsNrAdYjc5L9s9MIDYQGoX8qk42/7\nc9fww2BhgTrMbqU7kFwRFaO/jmg0TekdD8O0fxqIyBEv3dhkQGVbL586wLF7\nXEQ/yN1kk5i4+aWaLwSaYLwMS1HbPbRzCrndaWOvB2E0auZmoOkJlDcZwlZz\nJtJ6oT+7eSU219aCG46ukYo12rnTtJLYvWCe1f/jLT/0PCfm1FjRlIZt9r6H\n4a885KmV70Ez+VKciIPKAt9/fmiPSb69Uaw6D8Qisa/bsarle5GJ+/a+nnwP\nr32f8UetjfDq2nKYnW1QJEgzNONG32tVGeFyFdOx9DSu/SKt5UQpKt4TTy4i\nTaSoiLpnSzNxT+rYN/NHj6TZiOlVEpT9yDktfhinr50Dm8UDeaDt9HuwDK6e\nKEslnFYp55tcqoVtdQcJDqXhBxYqoLx2pumn9oBJef8SGm7xVlVRQ1yJXCl2\nkH0g\r\n=POoD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRQ0Fwcj88xZ78VB8kdZ47MvywY4qf9wLUVLwxD6cH3gIhAPDGX08uQvC2lUeO78C+qZG0HaoXOrswDYbek/l59NEt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.dccd254e.0_1614373832431_0.6842271710792402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","@material/mwc-tab-indicator":"0.21.0-canary.7dd1a27d.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.7dd1a27d.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-o+1MKqHhwvUks6hsFFH+Taz6C/fVLHy8t0THXZdo7VNgj/AYobhYf87Agja7yqyiNyaDNhV2Rw4UxDrRjn1aGg==","shasum":"40999b0bbbce46b5718b75ac36c271c0d51e0abf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":66088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQ2CRA9TVsSAnZWagAAWJsP/RTP/5HT/8KgyF/KOIit\ng1hQBZi1FrEnluxdjIIW6Ek49r6jiP/y7+2uZeFLK7JzOMgjOwjeufiQsrMa\nzTgFrghJ1fgg5guE2zitkB5h5/Q7HyssNF+mCdOPN5LUMAI8hK93+IlGLzJh\nhaD70nKTXOCyBZzea361yrFkMQyZGXoQ+BG0ocP72o4+DFZvT+EdQ0Xb00II\nZ/yx8a7169g9EZ3yLlOTH16d3ns/isGumPzUgurYBKrFJiGXmCuncrdr/Js5\nw/vYmM7BIe7+rHOiJnVDW8IMwGrNtZCiJNYut6xRcv4Ru8KAVgcsKJgYFcEu\nY36zdifA7SIC+KueSAJGP3+2DgLGjkSdNu06wRV3yRYE0ytlkFkCL5Jkb1Rf\nOEKniuazFnkUOhVtF8Bb3cSIwd6rfQZWhd49FIMraoVMJJF6ZQHJcfEkvBqg\n0TtdGWklgs4INhN9jWYy5gJ9GCRWVs2g2ABl6oXl7sKyFWItVL0MOthEoKmD\nUcMCBkz7CJ5ZaXTzXbbaQ+3BlFLdsc5+2Yh9NRJtkcG1XE5K6l9H4kSpI3xM\n2mhmY+TnTT5H1dvNB07y3NBMcO8IGr/4FPzaVBk4z35l6KyAwJarjNu4dZn/\nNTSGsf6nCOM1dGlZIbdwRUD3e4JxeF7/KjCslk/GFRc5A+1XsgWzp1pX9O3C\nqt9H\r\n=Fogq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNu+i8+2oRJyW1evACNoKJFj+4oAEg9VfcMts5Id9EcgIhAO5HSB1KH1tWlbVjyVm/K6El+UjAWDLX63qQ/0Ncysvv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.7dd1a27d.0_1614636086230_0.2952082062594763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.12574572.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","@material/mwc-tab-indicator":"0.21.0-canary.12574572.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.12574572.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-7UdjCqngLdn/Nhn336jbXXeWd+9/G04khqjdhc5fZGAW67+F84Eh9SoIPqZ+VbvO1sBLIOCNEw6I1YiV+cQqrw==","shasum":"79512eb861cb3c2104a334d63f859b63ac399573","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqA5CRA9TVsSAnZWagAAFUEP/jylGJ5HCUj+QjUAc94i\nPD9CMOAGfWOmGBSZiN3iiaTeJ8QkXFZXnc/shcjM2cfk59XzxFc5lE1E8Lbl\n5dH7CZq1Kp0Z57qZobbv6w+8D9CK8irT62kyhPMtfhFrUbp1EG0mEI+oh4lA\nzTWn5soH5S0wtMO4GJCMDmR8QA/PsrmWpETMiclVMnJnHxJq4C1SLrvrHXJx\ntcE4/nNc0RWf3EX94UyiitLnnvlotgcXGoEfPgZBJFHVl0NUUJt1JiEPBdTk\nhz5PwFvwgV+TnQp0fbwlvfCci10CP6DRLn/LqFD7uRXk82zWmo/R3OCoXkn3\nIzXP89AM1vgobDP6hSBDIq0KK3++qMmj4w48oejLeiv6aVP4k0de12u3AbiF\nBK5+qKXOB7Oa95aKpvce5S+41IfPvT32OfbOr925T5m7mXFyf8pVSOGRS1JH\nI83cpg/s5XQ+Ohumtt+ibExD0TKaLhvsCOauKu5H5pAHYYVSxyhJKUkCtYAu\n8H0NOa1CJ1UflEja3lOjPZic+gpeqQs9qU3OAAshiOYKiq2q1/MSt73Q9XzW\nbtMAEGL5g8HLXlOhNMgeFmT1Wnu8Fi8XHX/h5yFR2a8WkUAXaapy3LfMiMBf\nTePqyo5qaBlCp6C7lkSPUO+F9en3nElB7Evi3wwcmEFS/5YeSfcaOt8bovz1\nYDul\r\n=P+h7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfhf9vd3g4KrixSwDBsnVD4OZq6HAM5CuO+1DDVRB1zAiEA+T06ni81to5mc+sW+L+d9lnnTzZyk69C2q3J1iBUZf8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.12574572.0_1614716984512_0.6762093137368461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.1109a3d3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","@material/mwc-tab-indicator":"0.21.0-canary.1109a3d3.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.1109a3d3.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-CUnEtN48RHHpxA0aoWm4zj9da/UOiX8omFfCwxNjECFqxehAi/uTMwNPIgH5zksaW374pEuJ2i+mddFnhlFdKQ==","shasum":"ac31eed0cc3ebcda84532e3ebec56c6a10cc2e1d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqF3CRA9TVsSAnZWagAAejoQAKAJC9t5bWQ7ZRcLezCq\nI8FcXrm1tEHmbRs8gB4KfoNwS84SvhkJu/0DiRUCemP7CzVEEzHxsmjEHBWs\nH13zCF2VNs1T5OID9ZjT1Yoqmr9qLus2hoJh8m7PoEpDXSOLobPlP/tD1yw2\nRc41RiNiZp4+VK/WMUC6+98QkFTxrGeRsoYVDz4ReCOHfTT9hZfHUh9nk9hy\nOPUI932p+WWEyKb62lIZzljF7YXc0f7naTr9X9gavB5bvAwzrGXBKHbPjkwI\nE00ioN5WyMd9UJWEpTFnybYn9sWGEckRATsBHM7UJIBIwv/KcySWLnX8sCYR\nppm7ZGmEG5E5HIU6zxRQfwE5STEeT52Y84DHYnIZNsKmoejw811lajHrxAFg\n5VQ/Rl6Z1+xB3NGNqvk1MYBxAKVoRhJsHd1ptoAAoLdDCd4NPwEj0IdTZMq5\nYdwEa//y1IadjXgGzUlaxVht9BAaDGqLu2wly0gXm30vQWVJ5Gh/7Scwdi9B\n8cOMwN397Arwo4z9iut72DV/YWUaCKA11iU3oA+cfdS/vhPMyTC888fwwalo\nnOTrAsrG3bqgRQ6aNYi9W3ZeNQAYA8d367TuYPTCty73PNQplKW/z9PLIO6z\nf6cTWhVveCEg47zQi8IEaBS1Nh1Sl6h5nge9j/DsTiYUqsstrqb6TnV4eyf4\nnBPO\r\n=lFoO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8rk9MWOABAZvZCQeVLlaHkH8bIyyro+Hk7+TGEkn0TwIgIBdkZv5MxWtBqTlcSl8UQCucMqenhBNC1pYPPe0R4+c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.1109a3d3.0_1614717303088_0.5696351899631269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b9cd8739.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","@material/mwc-tab-indicator":"0.21.0-canary.b9cd8739.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b9cd8739.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-wC2jy+uKGWPTWLhHwNzQqzo327VLJgXZMhKeHGcT1L8weGoafnHfEmhYNccftEJERUw2Dh0NipYToxmVYNBO/g==","shasum":"5dd72359fb3f6ea84efcb3cd21233e6b61a49cb8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vdCRA9TVsSAnZWagAAHQkP/25SNuZHV5wYzEBbwo7s\niOimFrR8tA1/p2IsoPTBZDZjiBvztjE2Kb1iKFRUosHGaYmXhVXG6WdufFt0\n47H7mktE0wHO05bPB5VHnuxchxFM9Let0u4uSpDLj0MUvO5AtZ13ZyIIVmgJ\nKAPG6J77IJjJEx9kVicxqGEDZ9ysLhA1yylQFXyItxxJwI+vOg62VRY3Ig8u\nLFK4+/3IRlfqz7Dc+CV7taH2xTjtef4C/M/XJ648efMDfotOrqFuHjSdNUeW\nm4o36U2PxoUx5Z5XzVuiE73+n6F5aOE3heo9ECbt0ECESqLlRBmofw69Ye+L\nLnbK80eJqqaj7X+VvHoX0EWbzdB9GvCMWrPoiX7UAYcSVRxUxsSQ7TSJzOSZ\n+U7SbjbROCn0zI/yJL7H6dxAt/mu2mx6D23rYzw1yFQzKhybZX6t0gdFX0cH\nHEb4Z8di1RpI17kCZ9NyNgukDDqdfRL7BWen3OEj3SCE7ier7iD2djLO0aAH\n/edOdF6E0huc5dAt9xHuiCPweOLOJ9GpTZLjD1qbWvl9d/O5cvw5yJxm8Oj6\nJ3DCq5Jj5UERzRjkCnJAJLiHvlqwjREAxUsKW8RfpIccZb2CNkf6XvhMve0g\nbxdmemBQ3syr2zhe4EDaj+0DT39WO4yqoRqVRl0erpcU1gr+dJK3C5p4pYPY\nhpWR\r\n=haTJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp8cdQrWZp4RlA6vMXwyLHhrh+nodxQTT00Pm7+jm8OAIhALHWAVP9++8ujdx48sGO9sJt2+nuZYat25T3AY9/gb1t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b9cd8739.0_1614793693201_0.23793066645282468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.71ee796a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","@material/mwc-tab-indicator":"0.21.0-canary.71ee796a.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.71ee796a.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-roHJfmG4HRF/9eBYbZp4vU6ZJOlQYT7xuEACfyjhpb3UgRECag7Bq0oZbrtfp3fUzZwD1Sz7zUXvSEXcCD86TA==","shasum":"3640063094153315ccd6a854f2ca80ae8266592f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1wCRA9TVsSAnZWagAARs4P/RTbzwDfH1OqT75a6AB7\nD2usB22mhVcfbOTPzCiD/5hec5+v6wbVe9cvFA7fRQV0NGO0aIBkzP0PgRWj\n9KLVHx9I+HiBDGuSVIoAU8kEW/wsOwvS0YcKf4W8xb3tMWKCFoiTdDXHumCx\nz/1eETOCDYdS+9/QL2foWDq3I6mpGlGjUyoB4nIVMdAqNW7pIQl66ijawB/v\nW6jp1/5/kPZbZUJsX8NFI7J8WnKz30ib8XlcoUlodjRHnPvMqW9N9360Jvce\nooxw35ictMy8mCPSHnFGFZevHKGu5sSUcdBw0SFMKabhE3OF0Q/RlwfP/OXI\nhQ7PePdeBsVENBt2hK3H/Byf4GVm0AKvM6Cwcq3ZsN7vFnTu3PE1qqqj7Xrz\n6HCi6yM13WpOF7+GV+9PZNvngHpCsLNi623kZNE1CQ0c0xXvCVpK52w/zP01\nkNlFGw8G0oJvaz0oU/+QJ4X30LdhzoC7vVfrb44E9hOsIfJb5tH23Lq8qLgx\nUBzyiOYRW3BDJzc0bk51UpRGp1RloWUJEaiIdP9Fqr52BgIoa07bNZfj0sk/\n5Ysk+sPeAGYrNxJag0ZqMbytwbBfxI4c24E6oPKRqF6Z5wgNa08aW4zRkE61\nA9tvz3uC/DA1f3xJvzL6+622tWD04l/N8BPdDP7mvlK2F/ig7G2wPhOFDQrz\nKwwc\r\n=Yksh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiTJfeJnlTLTIKnHalM2y3Zzhg+5hN7wyzMEL+0cF30wIgfXvtkTxQPWXYl4HK4DiRARiEc6AoL8PFonI5UjGAd1Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.71ee796a.0_1614802288143_0.5683113993327114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2be191ed.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","@material/mwc-tab-indicator":"0.21.0-canary.2be191ed.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2be191ed.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-tYSXx36EmP8RXUjh1OEFIXXR4zyHfSSyjE3QW/s05GBekVOabjU214NJ7jb+CRM/HCb6naJO8Xtxx20+rqGk2g==","shasum":"a940680b76d8aee6466b85a53e86ac905a90ee42","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAT9CRA9TVsSAnZWagAANjMP/RjKI1q+Ei9+HIDOcvzj\nkZmSpXilJvMew0SnhwhmzKYqe9jsWfdsm2Rn13WUeb3VV9XyF8ITik5b0B3M\n5ORESwcxLFLcolvKlyn/89lHuLLTTCySbV8EDS+dlSR7CBUu94QBR2nmLJ7v\nxkaVl+NqCNZ8nQyxvL9iOcDnjBdlq7RYrCTakot0TWpaPpQJWB6KvDOxUvOl\ni+KTNwTpQDe9O5HC/pv/8ITsYzBbXfu5FE4z6sVQDva8IuGFhbH+hd7TLcM1\nhy4beHgRWigaHR03k1BUlfaT1ZdSH6KvMDOMVznurL2xIwKkghDezMzpvtV0\nZT+vXWz/TqlMCKVIXbk62NTk9J+iQjHgmY3A27W2LwEZhijRYREkM+sw7Itf\ncIxhOsuWgjdQQpzADV1m+GfMlf3OKTes7efQTPek7JenHC5y2zNj6Gpb9gKm\n1cD5OedrYo+I8VrilvlGxcaLRAq2KwWbJzbEpmast2eP6Qq43BbCr/NlNXut\nkJ9b0Sna3rAN2llwfHUgVMaHM0FFkIaUqUJvRl8BAPzgaOtW1IrPt1cSWufS\nerSYuIL3tGZticL624n5aw+IEmyKxauoGdwOnGyapyOnauLKgp3yZc2doK8c\n3CfsYsKu2akvPDu21cYUL+MKAkjNuWRzpbK6wj40XkOuQB4HdZ2Y3QHd8VX7\nhHaz\r\n=ym23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhhzcCJDVvsJeSM1F6UTrWthyodMroKBLQ/tVfpCuCNAiEA67T+M9I20/4+NzQP9qULnTD26qCyCmKYE8WwD+ob64s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2be191ed.0_1614808317189_0.3724286557742811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","@material/mwc-tab-indicator":"0.21.0-canary.6dc7b06f.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.6dc7b06f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5qHQBNd2FfzzMIYsWHhcxU/z9zUOFrRmARW0vEZH6CxdrmgDFaVET52nHNr5M3Kv50SaYqrDClR8fGblbdERxQ==","shasum":"e43837e09943e8f824cd645d6c16216b45098dfe","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnSCRA9TVsSAnZWagAAvewP/1aPvKHvX5nzTpnaLOS7\nwFluFKKZrmYMHUPAHAorVHlwxp9clE1XJXJjoRhunc+toYVf89+bzgCmt29z\nwmCCLvA0rGPYg049yillYiorpbPE/bqAsODCHrp1UE0UcT+VY2yNnP1VvvEs\noXznrfLGyF7clvJy4iibKhrR60uU7id4KyihIcQ6E/BpPvgDuJCzjojchGRw\ncOuwP91YJVuDwHEOLe068/XTWhj1AIxwiut7mlAfc0qSf7MPIDTso4fwwolK\nWTNG2RvryvmvKZfPWFGnX/J8eXFy9d6vgm1B3cyVS8LGPE1wvFa57VW37bYE\n4vSOx9u7qVe1D7XzWEaq2wK9XKt5HM6XpAREdW3pTluovcXRKir21w2orrbh\ndBIrti/KBNK3l7rn1pxr1QDlB8QTlIHTExYFXBlRza/l7KXv8mZvQc3tevu2\nhkIcdFjNjMyu71YcIaVJfS8HSwCUtReBLsJPcA92+U+ceqOz6HQuraM5j43W\n2vUSO0hTb972bChcM4f/53nR5r+IzkC4IPtlAOUDXbKLlS4cs4kG77m78FJp\nq5AOJ8Jad759K2EtsDM4HKM2BDhConMyqMcUaN9rHPtfn+dkDLJJtwdIj5xX\n9ztkFX2pabWcMet+7DVQzvDqx5KOo/vc+zjnc0nWBMN6OMn3Z8D3nlEMQpqm\nM4IB\r\n=oj/A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaVr2FfZdyDvJrZDBJSjUQOfTxxOVWu/NNlmaRFnBP+AiEApytj+4IXyI2bYkFS+BOfxctnINKtDL/sXY5h2TZzZtk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.6dc7b06f.0_1614903762285_0.5423173847764087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","@material/mwc-tab-indicator":"0.21.0-canary.24fe7ba6.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.24fe7ba6.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GoREtDvKsee4dLdjLwIZCNW1VE/5Mb0/HDTzrdAzcxReHvPjU7I79dB/LxcoFiJCjctblZBNPlhK49zDJwqzNg==","shasum":"9e11cea80ce2b8c3901b79d46fc94f78fb98fce7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmn+CRA9TVsSAnZWagAAATcP/ixfPd/4cTiADx+Mwerh\nWKIE3rN9s093aVAdP/M2X+mYCCq6fZHGmD5gfVgP6R6mMkuTyOxlnOI1vCL/\nwwjSIYoY7cqfCaepbbdk5Ax3ngIdwzQfu2ojzLHHEyrSe1hFef/Ni2982s5F\n91fL6FZI/8XSMYPepG5rgMvv+O+AZNqG7DLIJRyS3ZDap1kh8zIJEncg8Z/+\nqVaACD7kw79rbnIh8djHgVKaepKsQdUPVn6lkfdqJ0i8648V87kRcHNzF//s\niHA312aGmg49WyIJji/QvZZBrrad6EXQErZPp93hr9oVmrp7x08FbJbheBs/\n0KmKQpvkOxFivTBX0NxJy1gRalHvOVO93VEUj93lEsGuvZSJVzBNzwnyWulj\nmSYdygP+WrEmzN5DEpUQqDIR24LmBZpihLGkkdS+5zp39F545tps+pKHeDJW\nsdeac8zqDYFVwNwxTWVU/qHjx93t0w7xlvpmXPg1+Qlbdv/gVWNmYYj2BalA\nh/8f6uCV4V074Djt0F3aNFukv9S7jbtP5HYystOCozLjhxio/wz2k81iO6Tt\n6Y0UMUNXaMB/MtAOSKCMDZbmYLfux6sk8h7i5ArS0h4B9eQd8U3pUrIoxsDE\nWAj8TWOCafwZHzkliZGa0jDgr9w+i8IbkgICpQyz+gkeXk4Z922ccEl57QSs\nO3ap\r\n=kILj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSqLGez7ZUc6olnrCIeJv0b4Ennn8ADBsPl/MEiFW1CwIgHIQsS37XONKJd6I+XmNJ1ChW80PUqS7tWrHwqV4xeEY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.24fe7ba6.0_1614965245695_0.48046443099303304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.12c477d1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","@material/mwc-tab-indicator":"0.21.0-canary.12c477d1.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.12c477d1.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vdSar84EjTSgZmphG9jxHOy2A+5kqAMo4OfzplEUh6aDbxCFszOUSSDZ5tS1p2UKaw03PyxAlL9DAfvlI4zGhQ==","shasum":"95f3bcadb7c9409e8f38a635cae426ba9871efe9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqP2CRA9TVsSAnZWagAAAigP/iiKGNy7FgggSd2l31jy\nJzGGUBZePBcQ6PgKqkTD7NK1ss2h/vMdHHsn7+nNm+JD0CBW0+UYlRMWGVFm\nTSjZC9J1AP5jzO4/hNfnDld6O21dbU/9K0KA1R5QdtvhmASF4bNnneLLQWYr\ng37xJS43Y39WQFSab4WIJWxAwDd13GrHuqhtik9tDqWJTgkeoYaLUkrfrIHn\nYe3P/aOtsC+UOcf+or/OcgfBo/OT1ukWby8Rnf55kUg7A2NIvaIBgnfdQy8x\nouWnUQGovfKRmU9D7sNfxqsBqbnUmFRzR3C6YCqn1ww7PZ5ze0HsvFYGnonJ\nUK74Hhc+qZ9rTnbW0Nea+7ka2kqO3No1hU5zdTooWdsqvZseNeGiFjNJZ1s8\nJi89+dcmO2F9uTqDTBVY2CtG2h8ikQJvvistuj32LAaB4ksPXiOkpuAjuKah\nf768CPewNr6y6rFmoCczKMsk7dHNNpCvovvBqABuFa0Twak7prSs8yRivoUS\nV7d/N7MmTa8H5+DZKF2ceOZj3tScTPPfR/qLzOzbtjc+kz6CKKBayL3Hjbz4\nLr2bj15ghLJtYhJ6opGFfuJNoRphgavAxCn1MEexcCGErMZB+btp52Ap0qfh\n4OUNoHv06g89uSpqXEaTDu7XUFFXFTY3BwajpIBzVUlwtTidwCJcSUCb9oRE\nncHf\r\n=oS82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFCf3ydtgify7Mn5Lrw+hYBI2oE6+WhYiNnK9Hh3QzLAiBBqyLTo7+mgZHnbg0hlU7yai1qcQMy8nA0KnNegpya4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.12c477d1.0_1615242229503_0.3777004067576255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4c38f801.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","@material/mwc-tab-indicator":"0.21.0-canary.4c38f801.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4c38f801.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FOp6011IR8NgDu63+6GUYHfKpmThCld1tHzMre96Dr/HcIjw/l8/vru6+YL7Ejg8kRxP4Jv3fdrQZe6ho7cvlg==","shasum":"38f7671deb513cc3d29f55e857d2b58b1d0b125d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJICRA9TVsSAnZWagAA8T4P+gJf6J7jxEJJHILQTr4/\n+GfCFAIHVsAhJ65QIA0ATCE5yXZmuWhTWKt5vWrYFCYG6BsvwFemr/RgKhyl\nMbGE7EbN0iwkW5myPcdwx9rOe3iquXbuHi75JWrdXSi1a9xPOUo8GRzNoEaK\nvrxq4yLHw6JvT6Tl3MlC0gREvXJBtiwZ/nxaVTnXHTf0ky68RYusVqJNd5oI\ngXYbWtIAkRAEx6LQHWcX8KY5Ky2RrK0S/iLr5p2J+81ekZIRcpo1BZbY07sX\n73AolCd0X12UhXXGlLw93WBDml0CbyxKxe58ip0XQumL+ckT60DHPc6tLZXK\n+pNaf5jl0NR2/J7+pTube+Ud7tRtLCqU+euj5wz1VAEJCkVPIuoPe811Jxbg\nO3eb2m8ibtnfPjA3wv4JH9sE77nAWTI92odzLFtr6kCpgJ2I0isat4d3RUuA\nx0H7J+fm6fduq0eyM2hGVJGSmvDuyb4QmtLb18QJUnUcKyGamU7taZsKnL2X\nPJfynaPbGo/6lwAiWvUM8dcpOwQad7QEDCrH8PiMSe+671iOPZCasEuFAZeg\n7EGsZ4FlS2zLbMua5Z7TgpFBVIMyj/mpcGlcl/ZfXKx9vZtLwr+hR3tPmjOM\nZgXWiJJTyYvG0VTIFVWP79N1YDkoS0CXx9hdsT3WGZPTBQVRSMdsAt00tZzu\nSVKF\r\n=a3Fd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAy/nsrdpLMDXCLv0W5R+83XxBKxHv7H2KLJUf0FS7ZiAiEAtx9kCnc5hQxVoFOOICRV28KUmbuIGbaSLM2ecfzZZVI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4c38f801.0_1615245896434_0.5877624201435374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.8795b83f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","@material/mwc-tab-indicator":"0.21.0-canary.8795b83f.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.8795b83f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ra3bP7cuVFe29CCR9eyPBIYHtRDN86QfNeiP8ea7Aeyvw9iWRfHk6/kL93AZJPIfJR5Ss68Z3y6n3G6caIRxOw==","shasum":"5ebeec701fa490d297515cea100e194cc5e01544","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74lCRA9TVsSAnZWagAAD9YP/3Kq2iWoqsbS9iwQ+ebv\neidhOzwDsQu0ljqp88RMrW5se3XAL2Sc8q4sxGVr6DyfMbf2U7EW0LUJbIVh\nR0XCowmlD+XGd6zWnSz1i4bJwrmuWFPuFqlU01LhhiATZZ1yfZ9cBuAxFXoI\nYBMgp1cW+stgmHVgLaC137sIU60yJtZmGqaUwxJyVe0YED5olCVE4C24KjZ6\n1484EvlrbIMZsoVxw+Hj6AHcT2GmLuU6ZUN2QT/l4Ww0MIEqD67Idl9982Ic\nSrfswPsNinQyRlBABS9r2taMaiAcNST7+IoNydptCi32E/UtVnVOl/xsDw0z\nutYsE+igkEzT2T51yrnE15Eg6Jw14351dkk//nGhQHMNuprsI883WAQXt0EY\nI+T/+UYNbHuJYpWz6MV319115Us0mBAOjFNDYQ/05xRb9ofkuY77S3rCcOpy\nudOkipY2Q5JbF89MVcDA94c7WRoYnlGP0yTITH+jJPG6/0UR6S5Gc8KW7rHa\n9EK5Lp6BseO9mThE8k8nyxRmf/4/2YF42tGs6ZSvCSrZsT89Z7ufwXkcFD5y\n8gS8rJ+aEAuq8waAmuI/tiZ+0uqo9se5VnYoy8QkUqDCp6O2sOua0B8oFJZd\nett/7U8OVLAFDl2aD6Z452EOel8OktlXLa0Z7JFWlHxfjG85T9FxBOGlo6gh\nEmj+\r\n=dnrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2++hJ5uFvaeC+pFRCcZLgu/09XBdQZavTrZUwxpxSDAIhAJrV8vazgXwgpZ4lP+JQR7L0lYiik3fIq9UUQaWmMT8A"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.8795b83f.0_1615314468552_0.4160354492046816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.12b84cb7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","@material/mwc-tab-indicator":"0.21.0-canary.12b84cb7.0","@material/tab":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.12b84cb7.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jln5NxGPjZtQjUItOcZbsSbLD0efZY4NTYwAd49brixt3ZI4bs8RW4skw5CWRfZ8Sak3zzH0qIs35zEB6lcu1g==","shasum":"d2b6d0c7b6167fc66c169e0f4c61b3ba26863039","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBW7CRA9TVsSAnZWagAAMHkP/ih4iPylaCZRsQlaLZ7g\noXG4gOYXjbpL/sVozwBK/XM7iiLPNMp1YqtjZKb5LGXY3jiqz8uG0WYr8I5u\nTP6eMngdIsXixVqp93io+FnztPdglQUrC+CaGA/H2qagpHjvrwQvBhUG22R6\nwshP3fUgF/WDpNcczx7cXGFCvfEXeBaJEiwcr+vK3P1kZoEZDVVjXTe0ZrjE\nEhQzCh9prJxyQ7PHhrTZPGRSUGlC/ZBxjiEvgjn5xdwmOsiPS3fq3vX1JdsZ\n5nb0sdTIUxUyQuQq1BInz5LvfEbMNGgobjJszKp6PmOvpUMjrQnOSTcupirj\nB617m4gtuSpQ8rgllZ8E7dpkdplCmlT4pvR3MynPiWNakh56YMmNm5UktnaP\nL3iCLo3kFkiYEShnp9zIDtyVH2IsJsxhsBrVf8fRwJZ20nTRVFfBOCeXjKiM\na+tXc0RFkx6PwTXXEC8TcIbwh0mmX/k9HVlnz9/XNfxuiPrQ6/vTWaRN/zIr\n/Cbn7SGxlAqfbn7VnOr9ViaRJzO7T4v4Mkc5/lUfICoz86io4o/SB3luCoGo\nMYhHTHnfg27/ZrCYOO1FZZgOLYCnfLEoEh1R2hvLhhoyUDFhIzNjIPNO9YvN\nle37zyC/ymkpPIUJNN6wJITozxVxq/ni1pMdHfANDTPh4Td1H/ZOhytPPUna\nwGa4\r\n=K5pw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB/h9N65Lqn/2NvUpPNKzy9K3SuxgYf7cEZetVmwk/YgIgfbTiWB7ot8PZGo06Dizc8wFno7PDxQGI5b5bSrSoY/Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.12b84cb7.0_1615336891259_0.39802156379966624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.6ac6784b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","@material/mwc-tab-indicator":"0.21.0-canary.6ac6784b.0","@material/tab":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.6ac6784b.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5yB3yO4WzcdKpSQ+lNhOqkODmbxiFoE2S76zY8BdTPpJ90GBZp7zYECyUrSVxIswy+QtyL2czZNdI7kSdSaGpQ==","shasum":"b14b3123e89806cbde0eddba31b4351dbda24491","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBghCRA9TVsSAnZWagAA6F4P/iX8x6wLMCrXDWQPOtB+\nj37FyvGoWCBqA7yHuz8S65K8GjF52EOzrcKsgmxIH+ID5BeX/V+EFEHeU5yc\n6uV8AUGycVBZoAxLHAEXKcsozRyi0kxH6o/1ePQ2Kdsm78mDxvoH1+4SeYFz\nY+Z14J8hWvn+G6Nf58gtCq851MPtwZvWaN/UbZQ+yoMFY01e4DadonXI7t1u\nlmb6nVXq75cU7t5LPytQBCGaQzI01n/OTgmfU7YXzk+OZI+dQuyphzuX6snI\npFnYW4Ga19xJgr55hY6z2JvTQPcZPzguYOQf3UBuyYDIduiBLZSuvEblWzdY\nkschsvX4UqP1pQJFW4EJo0OtWKyWuJPkSuew9Vvo01tf3BGojEMCshrMTl95\nuMISZB4v6rHpUc4e0U2ixrNVerK+IlYwrTAr21ww+1OwuSn2Zf964PD3eLY/\n2eTYxs15DpYPZrC6pQ81CRMDAAnZKldLHmgJAlSXsQKr2FdZ/fq11ZdXCDqt\n+gfgnCvldpiI/CsLQJ0JAQrNLwXFZhtDT9+atOIQnf5G26rTNsy9PymhrFOq\nnitxXFTvCT7fa9JAdX0dnWYP7Wlns1rsC2mQcGwR6OTgjFl/mdHPHX1ZXLa9\n+fAVuAjC1ziZjv3bVTxnRtrjoOo2ii5vssqRJPS49BHcJCrahH8zskXuJZwQ\n3xhf\r\n=ZqUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGOSnbrbpYry0X7LSbDtmZgEfFYVuf1mVKpIw1K4YcXlAiAZKyg8R0RQ0v7+XrZ/4kiXMmKN1rfv0s3wgpmKQSECSg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.6ac6784b.0_1615337504556_0.966242008324333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b6d92934.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","@material/mwc-tab-indicator":"0.21.0-canary.b6d92934.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b6d92934.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-frINX6QuivSsBwH9BZxvBgmd1mNpPqXKi6nc3jssNnIjnadZM1hBTeXiViTPnZxg6819YGIAdVK4W/gkcLDCgQ==","shasum":"aa361e721469594da6d930f80a3af1109f34fece","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGtCRA9TVsSAnZWagAA73UP/1bNqOf7ZZzSJjVR9jIW\nfMAuGdC/gylOyZVUYb3DlpkJffO1+OdFfzDkb9vH5hEXGfZd4BH1kw5Fl+lM\n4KLaWqdH5ngRSG937i+AKZCuH/pc6oPvxGdoIaIaxrsoWSOb1OmxW6WjtUzR\nR4NndvjNrKI9azdQSgLIieqeUiahlt1WM5lI3E6kHyRgOeYh+q6Ew5t5YEPq\novoEe05h+M88eOmYEItXTBjqLLMxN8rGz2cAUmllnUkbFaVY4OYslQoMzmMw\nHuFDFTggIZ4epQULSPQx3KC8dhT+EZ76syFxPf5UOcoHKs5jQbx/kOo/EfmL\neYGqkq+KpE75xg2SjJY/DVDu7kVe1cQlILKfdwEgcXnO5JouA7BKM+x0l1jc\nk/kHi95cmjEeHGeMxiUXIHtteViQXanTT9AKuvXbg063EkYySR9s0OT3Q2a4\ng5KZP/McSHw4QlAD6glk8N3MWjGIYzbwbgiA5hjetG9AxU6J/aKdQRtRDHrc\n3ZO6dNUE7uSHpXLiupYwiiE2pxm2JfStuWjXhuXqlM+/H7eCBno4VlV113IC\nFQErCDFKYZYF6dNTWlkqtnsv3GKCq5Rem2k7WwDj54fpPhmQypyZJ/p2QUdG\nhlqcZbYmdkE2fM76TpcnhqbSc23U1Tj5Cx4b3l2xqdYpF6NMmmjaSBpZlwuj\nLHWq\r\n=zhcb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxqyZjX2pfNCyhxBYjmTMccCPOrknIrn01eB64HMn9fAIhAKMuXN1cNAnF/L5AbOUoPibQlazkreu+pVHsMi5RLEy4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b6d92934.0_1615413676742_0.9982652730799213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.99a55b9e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","@material/mwc-tab-indicator":"0.21.0-canary.99a55b9e.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.99a55b9e.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Fa5nWQVJgzvRhnVkrFgv/2MlZwWen5zzdMpLVCVnFQ+6s+kVPirROsjjLPFfSTXICE+/NaNZXdnCXN4LB7CoAQ==","shasum":"dd2fd40ac19e2b8c4aa68cd5cdeea829c62f2511","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2UCRA9TVsSAnZWagAAd0kQAIgDi0uUvBkI9WIdNTVz\n+O9k2tFjdUgkSCftztHZM9QEpizFoIHmcmLgtYatwqDUz8DyzO7gGLs+w7Bf\nCZHqumVfzKaSg5DvW8Dcm297qheLDdA70Ein7kiq2mJNWQDk/uWu8xRu6PSR\nDdBucXT/IxiWa+LeLSzOt9xHNJidTy1P9EMyP7MCGSbHdk9Dp3jeW+ljO1cE\n8N2BcXuOmqVDnGiA1YL69bye1BhyLjdo1GtRyJRYiPvSCePTclXmYAg9YjZZ\nQJWFPIBs5b8PUBE/zXid79RBL89Ilp5yKIPHBAs65SDSkCL6aToS+uwGpfeo\njELOVQOZAuKqmrQKBJdr6WacFdFkU5pxwMic0ziIy8k2ochlRH9LTHJRe3pS\nOcGtQ3OuB/QAoYU0ykDCs9ZI2N6g+MhEGzp36rGXspSgfSVNaCFFlvqXRctH\nfipYvlxj0dbB2K2fQ1YLHbrBeGAUW20gNhFA1gJY3uOyItEuDug9/eFm8Z9P\nct1RHlZKSLyqlo2P/fFyl0wYHcX8sLNEdGijjLs9RoeGY0mXxEMiilxrIhgf\nOyCwgYWy6s6EoC7TvRxUpSsIOWwtdXKil6tPZS483xhTridW9CnqRmYHA9jo\nadc2wKbnNjanC7Tlfz9t7ySTgOtL5grnYdrT2OA5Pk9YbxxWYaBJjwIxxh+H\naRnn\r\n=DgoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCa6n8rKwr+RRXN2s191SgQuCh0XMf2TODbfwqlWNS2AIgRIvJBJG3wRI0W22KBhAFJquScbfO5KV9JSBUqk4zG7k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.99a55b9e.0_1615416724142_0.7965193714919241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.bb14efb7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","@material/mwc-tab-indicator":"0.21.0-canary.bb14efb7.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.bb14efb7.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M7q0Z36wqsfy7sbdyAuQGoEyzFgreGlWMCDSNsQaADZ6g6d3L+vwhGzyHgbEUdWK4dN9CxU7GfnSXVX+e1j2CQ==","shasum":"e5945f0f8736a4c375ddb1c1a4a2bdcb84d7d9ad","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVg9CRA9TVsSAnZWagAApigP/1QIg3eJ7314VG+21/Qo\nP1i7Q/mS+kVKUl19MoEzheVgdnNJbxecizyZkHUjRInGD5jk8pfc4Tplgkc4\n/QoDT3M0LjouhO6384BkbMGevliagJiBeYaEppOaDsvGzxIFHYxnsVfTEkfu\neLAziL7f98oyqVj5aSjIUvQOw/71ZbWbl5DYxT4spAumPs+IpVdVNGw84uZb\nRNYh92Vo/sb80jAsrw1yqX/85dKlfFln91ilevoB458u66QixFuyH4bhMUKi\noLpP4rhVt39jO872f2nu+pzjp6MSun/HleinomwOO2bGKQwhcM6vHKdEWBsF\nrrbZFIUXhIHoYLmdOjPfw8umu9DXoICGZnfZZlm+DBYewwK/qaC7AOyfSaLK\nA2mQh1gDexGp+hg5hGbxpEM3WpU/nhq3B1DHopbQHQ3mkO5IJjsNBmmDME97\nmBrKppFIpHTzwB/qpaY454N0Kxq8INSZMFC0gYZNVG/o+1oRGb5U5QBdPKzI\n+wd8yjpCREB7u38kj1kfv5P6AJ9gweGFZB5mjae2MgrRyVOWtyVnkythH1Wt\nDvNEKDQ0ApQf25LnGnFndgv5mEH6PZKmUnhCNowz8p7JCRGlseUFZ/kT9JrG\n23ptf2uzE7XSP5xcMAj+ySDdsZX1Hoac8TSaAFxea94c6mEpiKG6RbVi/Tfz\nJqh3\r\n=Fls7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkoIp1f9m1+8MMSIKMOlQdslsokPWqDZFcOMjwRq2T8AIhAPOB+wedxmaUHpXvHNmN83zgVc94RTLtyEaRwYp/Z7HO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.bb14efb7.0_1615419453228_0.17206878197191688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","@material/mwc-tab-indicator":"0.21.0-canary.9ecf3bdd.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.9ecf3bdd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-j+8ir7TB0YfQAe/UxRR5pLANhBS00UNwmjErCaBJprXnXs690trsd9otPb1lNJW7+JkTfIYEYfYQv7RH0jxO7g==","shasum":"cc9ad664c4f793b6be434b71550e174e42472d8a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMeCRA9TVsSAnZWagAAYi0QAKEY4LYLK7NkHt91YHS3\njNSbMJ26/nS0f4hFd6/ebFFavJeMzsZz9pcic0F+JdHhOqFxhzEEeTdBloJ5\nNFiBME93dmSnRXXvzSZ8gtXePt+oKhPuybX/+E/akB9iw+otPES1n/9OPVqp\nW/6VQKQnpGbNSR0M01pH6H8I8mR7AhsEtwQ35t5DzyDyzw78yqSVuh2PWdAd\ngXiSh62YEQik5oe6OnWcs796FOc8ma7T3lZy/bmIrDdeOFJmTM3Gx4HDCEUm\nrstGE5KNiRvdv0lnR0Tp8WazI8pQWAXtwte8e4hojkdWqmbTuMu+ie8CJgCN\n+BPJIKfqXP4eNUUtn6UuchkRri/Gm1THm4G+OEzqomQUDanWbjcRJ6aBHwo4\n2GWPUasLT6yeFqiy/mhYCAGUPvAJa5s0pBXPryX6mpH3oystC9RftXPLu4zG\nZSlcBjl043Zh99fB2xlDnPZXv0yGPMMa5d+jeh5sC72HBpE31CUYXU8o8rqB\nmPYLcHq9UimhBstFIru4e+u8JhZ54A39jkUVnwatXvzYWido6CUG5x3ubNNM\nrHnDh+poxxYfpTXgaj0BvDmRN1opUuOqX72S8DyhKUQ9y81dFNFJe3JYYDlm\n9CYzv+bHmMuT5n7q3dyzvKkH4xZ4QO3JNzeahPPBOeg8ETb0AltQAVc8kY0+\nJeFU\r\n=Laf8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTVufDmSGmc/IAt69rexwtB+C3mfZnARUIa51ybxg3JwIgUAlRC76i/ZgeYdNLwUIyCrBTTFvKBbch9gXwSMNjcjc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.9ecf3bdd.0_1615422238279_0.6635044800065402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","@material/mwc-tab-indicator":"0.21.0-canary.7c0e02fd.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.7c0e02fd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-T/4Mpq77pqb/eooEB9OZd++TLBXBXabePnWPz/PgLkTW70Q7Qoqh1kMMTeUN8MGkIvbUq38vRl+nR/7CRrXm4A==","shasum":"3c5a4862657b64fd574f61f41cd14116a1f11b07","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaTCRA9TVsSAnZWagAAU64P/0T3r/h4PX/miv9zr3gS\nUbqYwttnpEygrMLRU87z/ZqY95D53d5IOJlOF4TMk7yYZX/eh6vmhTTR4sbS\nVDvMkHnJDc6aiM0yJlw2iRaKscN/9JRPtgIix3QPK7gBTBD3A+FJ1T+OBqQZ\nCZtdz2cKya5fLtCNaiBfoTK9A1lmDTjA/pO5XTp5p3bRue3h8BSjjDm01o3X\nHcigKqwyU8ULG/hKr+BELmxYxzDlS6bRD6GxnjFxnvJYoqTkLO11tyrVnTKP\n+hfkOo2Vas1wcehCLp2jZY2ASIWr6JQQ+T8cZ/vWNz4E6gMoOwa6FtvxMI7V\nji9BqfOJGEXk0/bjczCYlzxs8uQvaeWa7Egjv2VjqdtP8NeIFqP+Ue6m3dpm\n3jUz+M2qzmkOCUK0nHjGqyokRMBJeJiBoPXcRGn1LVu6bntPrhzq1mRzHnNn\ngrf/Y6zxu4/tPVMw4vRAbscT3/jshUSFF/LyzhDHg0x2VS0Vbjh1tM4Dsmcc\n7PjhP76cYMUc9KRxIISiDXdNxkQQRIAUYevxNbFcI5UR96d9x8G6eAOuqCjc\nhdJmOkKslmksUWXgJykFus0c/4zdE2R/TGfbqYEGRig9RWUcUc9+Z8QNDwOA\nn7R13da+MI+BhT01pYuSj/B8aZdK3ovF21epRcMsEySNM3XDyYX3nEH8NpmU\nEAHy\r\n=LGff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+Ec1b3oTvqdZfoMviHZumYkzZaNEItRnsG+HR72/KcAiBMv4uT8km0QokVU5fM2/iD7pMY6/SvDX8n9QiienBcJw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.7c0e02fd.0_1615427218619_0.3366374346576253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","@material/mwc-tab-indicator":"0.21.0-canary.2d6d59cc.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2d6d59cc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GGs39xIINrVXaw+9aAfbSCqPjEWyYx0q25gyxi5lIf9DpRzUPQe6T6BEZW8n1/uisfcslLWVgfokm6HuXL8uJw==","shasum":"ce05a5b8de4f0405471361204afaff37a2f65d59","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":66106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGYCRA9TVsSAnZWagAAolIP/2wq4G/TGK+0Q3SStAb5\nYKkX+/Me5mDTY8/r19toa5REETRs7O9lc6GK4S9cl6j38LX528pPxoBp7AJF\nELB8VdwjqCQQtvGseyKpbo7OOrLkwzshyWi2fpS5CMa2wsNkanipkxNFH6Rd\nrG2DfRtLjtHfa+0Do8Or1NoZ7Px47v14YswAQy5Rghq3UdQCfPVW4/grNznh\nuIIksEJ0fq2B2T2JvqLGjRUofWrM2dp/5O1MDq7kD6t6bJ7jk+f8vFfK6b7D\naCRIoKW19npTRjTn/RicDPaVK3Prbz2QI44GDcpCNKHNxovccKcT1WbL5wKD\nUj6JKLDqMAt7U7HBqf7mKaE67pgmN0YkKvBfYXJ3DJEc+NmA+BF6JIln4DBe\nANRwK606aF+e0UKaH9pJP+aorC98xD2KDT+FV7bUQQV0n0ZD/NljU40z2oZM\npcyzR9f03k0edXsJW3fLu61Axsy+17MwCz89VCaeJRB7WpbexrMGEMWWJDj6\nHCcNJPJyHgOBb/2c+5wj2tlVzK5RugYThdR8jhFZfIJ11dPVXUzhgIbCHaCz\nYPzrBufHZOyvvykEkQrwMsD1+8/fYumBTD/OvCgmjtjZz5GvhFm2J2nvCRVj\ng79XqFOGFqew40TDkIOIV3ojs1XMjYTpSwte2/QNsNVJoEjxoxhfSVX2Vm1F\nrR4y\r\n=IjFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLnsHnHaLzRJa1FXq+r1FCgdnvt+DLo/IjXBQ1SzglsAiEAkYpbruBi/PrQUKD4i6i9SiPriQkt1yAhxYbsZu3ey60="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2d6d59cc.0_1615487383967_0.4428113242315306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0138863c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","@material/mwc-tab-indicator":"0.21.0-canary.0138863c.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0138863c.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-idlY9ZDetQ54e5OLmRuuJP4aOhZY51E+W7ULlfCLgEu7KLgepaPznzHzWVDB0Hfxnqrz7lad+IUDvSIm42Z2UA==","shasum":"cc987685c00ca1c60a419e2d7af633ad0464d4fd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNXCRA9TVsSAnZWagAA3RoP/0By4hvxtWAImuh+FgR5\nX2LSxA70XmCI4kv87vHmTOKMzT+j/6aRpLxcYHuxkOckas2pI5wSVtcvcKeU\neldBoKu+iHMCIk3Sym5fQmpGfDAIjK+hCZst8GEewZSGi437ZLD73M7Y2SsX\nmIJWym2C7ZId7HRPw32VXbLWV4GzcqC7fUp87Sgi7fe2WxSZY+zvA/O1zvkA\nDU5ogktIAm4yVbixmfHnaQ8Al6iuxhcykSdto0bMcqXDxpsVEm4cF3I/buxA\nr+wZozBxqv3hkEb4PtGDAKlSr63mBMQq51j+P77ax4IWtTYr/Cqd8idCIsxL\nV5qjJLgzlzjXTGhZkMNxJqO2CO90kmOdL7IqgBNZQB7n5LargST9JrkJDM/D\nGjhrWl0TqlpkhL83pGMDL34K3q7H0yRzbhNVaFNQMJy7nIqLjtVfwOOaoztz\n+r5b4hTIpqtWMFi6ogzEG6oo6uI0IWZufvpsD1VdY8A2026Fw0ROJk3OAzx6\n7ZQiPmaqIC3ahvLPyC2UqYn5PKnw4crcUYcOv1aKRQyCVXqR5dGnn0LZoA8A\nfAQIWVf+CBR2+GdNkW18BSwtDTU+0efYOAloa0pxdCx2kCpyG0DHxe9ZxUrB\nEOiihQWySGX2Bp9hbgMIAFdHQffHPD0D186uxQN2LJq5BR958owDitIWgyj+\nL/0q\r\n=Zssv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICjP5nA3TtiU5cKXr+m5ckvhGb06L6+YTaBDRdCoO3Y+AiEA0HIWuZgzSGYSQi0IJhbuf1jt02dulXp2cZUasHyReS4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0138863c.0_1615487831080_0.3049664664096934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.926f5bad.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","@material/mwc-tab-indicator":"0.21.0-canary.926f5bad.0","@material/tab":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.926f5bad.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tpNDTO65idqZGXEME4huenEw6qYsgD7LGmsukk+MoHqqtu4WzoKU1SmcZz1yXuVRCQDEWOrna1cwdn4TXz5Jig==","shasum":"08a9ac37f88b1b29caf762beba8b02030e5de628","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSns4CRA9TVsSAnZWagAAsnsP/R4nRTJUcqzL2V3hbF6l\nqRs/qQchL5DNsHNoE0uCXU45YTTb6jOwN+bbB5SSFQY1NhLFKzBolTWGNTo6\nq834rjrr2/5wKFzNGfEYFA6GqB1JYCmjNRP7h5VbZ9a+cfZQXKHTKjrCXI4Q\nW4Wy7IIj4h39XB4abMndhXg0FPvYJnyJuiPhrVbj2RlyZo5JzHpph2IE+UBm\nxNCH69FCmfKT2wVvW+vjOJcvaYbjuoUqE/PcyGDhx9giR1SueMSCiVliM4+L\nK5MW4zCZjhmJ6yZmad7hXiNNigpoa36QG0Jc69C8MHqa5unJx/K5ukVPgcRZ\nVILT4L0mziOqEPvijiyE5zu9CO1PyGr3lg0hsX1Kh4iMVka2IePFspVHqJFC\nk44PNpsx2gItcSYiXfg9FqEfrf2WbJ8uvyakQeZquWqZJiKEjEgvg/NlnCXJ\nQn6a3c3rUVW6aCUsbYIQRlZ2rgDSHBb5OSXLTOuxseJscHMeX4JharWGiv8x\nln8q/i1p8SmMrZeJInSpqmFHBSD67xMU2fbr8cETH+KxA1VLLBjF7+LdwTRB\nt3MD1puu6h99iDcWoBX+nJVkNkBvqqhYkOdS0O/P0MRZDKtMQYGJTI971SLu\nCWwpKrOYwh/Y7c7F6Xyfaej5sXgSdGepJ8I19KyUqLzqFfmIkK29g3WWb3PA\nwbll\r\n=AFJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/VkC1O21tvAOskC7Qw61sx7PI0UfTWJ7E5ZTevcGmiAiEAvbq1zxgUBsNY2YIZkoPApAv6kdzZvF1cR7Dp4w3mqrA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.926f5bad.0_1615493944518_0.056137468974964966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.520290a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","@material/mwc-tab-indicator":"0.21.0-canary.520290a9.0","@material/tab":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.520290a9.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ixq95M4Jbs8CTBpJjEMOn+jKTdqbcvRBu1D+lr246VvAacrAWoBPitIGpuLkiKccr7oNrzfjpmc6Ffj7rJn1yA==","shasum":"8dd705fae13cf7464ab84d1a08bfb434d54bd46e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmACRA9TVsSAnZWagAA4cQP/0tvSeNf4j1syy3D6LKC\n1suvRKyLoxOO4SSNXxeZDp2JgKcf5oS6KRx1Sf+8u5NJqAMcXTkgWVSpTqCN\nWKAhOyL5QoDnde+dfyrE8qLfzQGH+J5y9UxzuR1CJdiY1tFAFIG+BN4F9nYP\nIshTkw3h+nEke5omYWyEP9oqACJQOtX559jlxmWIE5Y6zLprfch1eg3FH2tF\n96FunYMGD09icRx0NiJ2xS5VdMCT2W6LFWB1ROq3G1ECwD+37fq8MsHSu0JE\nQI/OlmkXuR5eDS+fN5cQUzc+mEtJljdzIzI255SGPo8/yRLjAKlErxGjmIM0\n7Z0XwPu7si5IPf1y/NJyRKB4hVSH2/TdB/vHaPkkFW9Mm7lJirEz8w1jITBi\naa6NRBCMdedjZN7QGYvpYyVe3YrUoRN+TXa6dwZJHMOLzDYBJa9SXdOVTB3G\nn3AIS+Yqy/aD6r18NaCg7Ot8KLf1NYKH8f6uE2tKmE4kX3lj5H+TMbz5uqMZ\nqnMEzDMgKmBpfSTMnny8EbKUISjAnak93eUOTadlFR+5nbZ8Z5yMDN34BEta\nGztRBERlximk6c36S3i5AGXvfShMUVJQUxbnorM6LuIVl0A8/qjwu+agVEh2\nHOTb9B3VBQFh5ezdLP5382hIVlqvr34GSqIqLaSkDayvjTrPLHleYg87ptPl\n6Gxv\r\n=fEre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEK0MJYIZ8WTngQmCwLzgzkBzY+jBdptrGhvY9xLrQZgIgBYHT2VBZB9VRhkpf3ax4chys2bVVjgxsg5H3Nib15WY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.520290a9.0_1615501696517_0.01687586584206957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.9ec431d1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","@material/mwc-tab-indicator":"0.21.0-canary.9ec431d1.0","@material/tab":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.9ec431d1.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y1jIHBU4VKxiX8VFc6Nz0oK8L9rPojtqfqXQLK8rMjZmSUkFmqn3JpM2+x2tyeIiD4CveW7Hbx1+SGGJpffiWQ==","shasum":"0dc1dcc8033d1087a127706d114c54f32b23ae5c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqPCRA9TVsSAnZWagAAzOUQAKAKf4HlS4aBytRE88fB\n8Tzc5/4FmIyA+YXhawAjOuSscRHwfb5GHQpugZIXu7zlmwWKB1PoO7V8zvQN\nu8R0XsKoXvPDknz2rNmQsxydBO3u+a0gUcEQIEXQL6kungNasiLn/IhDW/E6\nD5GKTDULzYepfWup8hUk4gq1TuNK6SGzQkNvr4jzY2Of53IIPAPquBnauaNg\nO8PlCENRlNRITMeLNQNeSASZai9nyovhSW+/2UvOgs+ncm5ebXffeRBDfXCv\nW+pbzfVBt6c1jEV59UE22jozJbpMU4wlUWNaut3n6zIH3XOVheK7eCPIC9dt\neA/CQSzF+D30y+ZKUwu37ZvtOXkXGlCRvKL/3ml27jbLPKZOAA6THVLLVfxt\n+2+aJLfvplcJD/7ylmLEgqM0eWAfP6ull22BfXVMuwf+9Rlx7r36y0ib8AoR\nEArAERfXoQs8vx1kfnLrXNH3EbWwGc9PF8QDcS8yw2JcimM4tAxyu9DIofzK\nB+BNN+rQGdGGfV14eS4dV/w2soZzOWTHFRoBvGRsIN7MNhV9QzK15tOJ4ZtS\n5rZtCZs/4Boxqz8q7cNyuo4gpfPyEI3NP7N4jp3+4vMhHpUTDvrU25glR/Vz\n5nfPMK2eTZgDX3J3Yzy0HSTgL3egV9moBkAAt8G12iwJTGL7JZaSCTn8m2SO\n5uuP\r\n=72iC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAK8S8yQx++LKsRZm2A0FEqaP42kVs+KW6eTTCOR7hWWAiA1ZQT2797XPQfpZpkGu3yVCYfjm8GxSvpt5c7MxKqbXg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.9ec431d1.0_1615501967127_0.7164909738880993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4246c082.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","@material/mwc-tab-indicator":"0.21.0-canary.4246c082.0","@material/tab":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4246c082.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DBM07bUOzV4zMuANxkAs3y9c/gEtqtqPWYEaHMHCtQycAoWYBPFqiUJ/ILcyYkfDkzRLXKmkjdWmcUd4+mJTuA==","shasum":"c397ee998bf6f2ef6b197f6c1e1b7ad364444491","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwtCRA9TVsSAnZWagAAdKgP/05lp7T/1G3fuiyay3jT\nXqd2J/+Xazwjgq+2aQH4M88QP3aaQ0NZIgIDJVuXHV0ANAEa0zt9IzfNvyco\nLG9zOG0Usj8tODisggKBAHriOwVrIFCdRpiC9phILgHRQbE9Pc3cRl2K2Xfu\nd32QBc3KajzrRVBoeyrr8KGHX4+XV5wv3k5jz2go5sgg+pGSFFSQroK2cnZw\nzeiMoer5wP41vTP8d2+zXyKDpP01ngj9UzSg6pZL+tEEuUddtzctXdd5tawC\noFdPTrnd4zhpTu80lkmrSFAcHWokNhDVa1JsdbG0zUqy/fSRgf1+AHw22etQ\n+t6Zwz1k/5NmtN3TywcJLMYYv6Z/j7JXqnsL42A4oe3KY/lWz8lrAohg1kxM\ndghfqvYqCpNeqPPbMonmKty1t0PEyd/vPU3u+noXIhoeqE9Ug/oZb5K73Scj\niD55epln2tVhq+eq3LTnhkYxkwZnr2z7xQosw+Au7BmXK6720afUnjNuGW2G\nnypBVdBfzUEy3DfifFXCbxXxIh+xIPGB74UWJA0ffe5sQJaBoxKy8GgnOo3f\n0+j5VrL+IFmNfg60ZEWEhIcGNu1DVpPW+aQV6YCn39dR1y8ciglRNwYdTE+N\n8vH7ss+61a4ta9CGxg7C/uQxjVUFE4n9rvCx8u17LoTuT/okthT5O0Ca5/LW\nz62N\r\n=tgn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmmqXz7qTHiGSyjXnxHxueDKkNje0xzQ9tJ05VgCbuXAiAP3JTfKJY9qCUzNsyqx5EBuwVxmaLPVTOfRforHDNbSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4246c082.0_1615502381274_0.04640599301720094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.2d736253.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","@material/mwc-tab-indicator":"0.21.0-canary.2d736253.0","@material/tab":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.2d736253.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Y71xgruXxYC8tNpUNRsVuRLWx8RZc+BROaJyMkRghpHB9JnVZxnBWTuPtYPf0Z/A+/8abKQHKo/YpVkLfWaf8A==","shasum":"0de96288201c604a9bf987969070503ac8631a00","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FdCRA9TVsSAnZWagAAm/UP/i4Q/MXNfG6/u/36zFzZ\n5KUZNN7a/k8umlqyTmEInyYG2uJW0TDNfNePqZEq8u0QR9LvGT809t4BDyo/\niFbc9Uc3iCa5U72uAhKaNCl/ygW3qBsfizxxOXjpAHcNgeQLyvJ0US6eTOyp\nfdlaPWaEmgefsdi9uuGbk+p76/dMqD6Dy6t96RLRv4bD9xurJ/mrRkaOOV6T\n/aRYsK82y6un8GPJdXT9Mzjx9ypwh6A3Vd2+4zgjxMs/DkuGklDlox6O/rdB\nsjIwI8HgCeziz9hJuEgHjjV4+MMZSDNCCmf880SYJfe8HnIkB0a1JW3ZQTgB\nNIlQ3f3Ivhbe06aH2Z+IZ2ji0X0sEf0hs1H+6wbVxaS3c3yLKcbuR4BEAZc8\n0VqkgU7preJGLVUunp5eo6X7bh1fM8Rf+JK1B1R7bHQNzYBK++EdZVeeT04g\nGhSSPFingCKyNfMOCOGwMP1RxOP3CYNZPkTxrU32Jn6ssy81JY+nuqd334jG\nRBJ7qw/NOlw84HwFKZbRIygcGirrh3FpmQwI7mDRs8awe0NcjdCc+NX4fH5Q\nFORKz8uJTqs1qFxtZgUOrOX50zXnskxXPhSsyLYUEVQvPStW8uk/nvvqkYG7\nIlXDmXe8EIFu028gQ5xgEJIcKUtInZg5aL7IsubdJqVMAz/kbw4lxLQ6WNPZ\ndF3X\r\n=yszi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRHlIH35+ie26J9oFFowlCUFMZj4ZV6YiKe2qnp/3mhgIgFrAYE/gvmwJemJoGF811tBCbn8hIsASYIDA016MxZtc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.2d736253.0_1615847772684_0.033769894058514716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.7033124d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","@material/mwc-tab-indicator":"0.21.0-canary.7033124d.0","@material/tab":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.7033124d.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TFYQJkfB/oklyXWxLVSXv/gU0yFoPjRqYXwTR1sa2JX2xWjTnIrYaoY/OpBX7ITr89vM6HBffUIJbi4f1PqBWA==","shasum":"74404ac27d3868dbd8dc6e677862e16d607bd8b4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsECRA9TVsSAnZWagAAQBYP/Aukt2aKKQ8fJjkLSa2p\nAC+Z9RhcUjHpT0QOdH0RRVMHa11xr7IgQxwR/6HRRA6llHQR5OfYIn6HL+uj\n8dndf0LIZTt0E3nuBNl8G9geA8tlvvryozMS8nWGTMI7uwbbnPXqPWonasmh\noIp8D70kmjREq02s9GSH/OgUyIaMX3es+KY4PK8hgfNakmMowvlqN8/lXNb5\n+C3mKNpib1SvxDtRUkbyyIYFe88FxveUtAwqlZGqm4KvWdIT3WP4tOOPdceT\n6banvKqvH2olrOHYsd1+uSw1EkVMgbbL/gpRNN6x5RQip9FDyTlrAJZ3RgMS\nrTqYOTEan+iMe3npp0q/l///A4cOTRh62OL/E+iQP9OjPhdLZ8hh4nXj0/QC\nG3+cx4idcehW9O1rDYrI1jaacL/i8LsAm9FpAgIWU23ouHQQTRXzTzmbbJuT\nQFG4648+r9Lh35iopEWNxM/tEltQ3DDln6+33vL/Vn7iJqCWk6nSeKZXpfBA\nDZSCkPcsBnV2m3vLvhJ2b07DP+4+HgH+A11g8SjglfR+iYIjPenyDs2LkdmY\nDD3JlL9hMsYcqnTe6XeF7zRjm9NBOGkOVjDTlCV09zcc79nLNFR1mmyNTi7r\nO2OKO4407ysZ9eCVg1Sish2MO5oxs92RYykKEOyjxb00sOKMwcFpzkKU8Ie/\nvGqF\r\n=JmNd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEA+boJpssE20Elroejec65+dRxZpSh/NgPs1co4S3qrAiEA+MNeC+xhLKZ4btC3TzexP4hhI3P/RbGWV5kPtd6qKzI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.7033124d.0_1615919875971_0.43168106090414726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.6c0ee901.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","@material/mwc-tab-indicator":"0.21.0-canary.6c0ee901.0","@material/tab":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.6c0ee901.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8mrNLqMX9Nm/a0+lzas9eK/mnMgqS38K+lbmxn7+UwOtqwWC7MoCoP4OJf6xm7rwqCnZffEl85Z44unjVZbNqg==","shasum":"0f5559d4011a238adad0173696a674d6bfb0f64c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTObCRA9TVsSAnZWagAAam4QAKCg24eRxion/DUNy08C\nwO9f2w6XWBGIBZVVMITJxE4gmtZEI6Y2nEtRRkjOJ8t9YoBoVKbMo9nLXufd\nDIRbcdl9NA9CEBgPe9jAdHChRMubgEx1KsUZjMVRbyvjPCM/iti6Y6nffzj5\nEqvoEI35kQ+53lBwQ/qvoEy8mQXWVhG9zIrHeN0vnkbsbA1FmUsuzWyiiei9\nDxALq66/qbIgIYu+nlI+6vpau15LP0Asz6WRGYo/kJF2Zze7WdMnbDWFnUWP\nB3mtizqaUv/Oppkxog3ptdBBrfkNCDE9mrVH1uoSiCfiB2hrvQp5BdRsU6Oc\njwU5hXL9/gP7pyUx+BrghRZWiG1ltGt6W34gg/WHfMZ09ggDLJZmyO5IOgy+\nBE2ck0mRG4cL/C1N/2+hp59qHOwHHP/OMqG8OZzxMj7DGZ8fMamTFa964iyC\nujC1ov6OfuFJ5Y0jQMtLqtBwCrZ9+y4cAMJDgKnVNzitwB6VIvRPh+QPkV4z\n5CatnkUZi8X/A5Y0+w1h0HtHs5zx3o8wX2Noq3yZ23WBboWiFUFd51vdLqYw\nslLKpJQDmTytSBouv1huPM72rLVqYpL1emT9sg33g6Q7ICWLCFJOcdTJBChQ\nEWtjDxQwnZkI7okU+TpX7S2tovdEdNclUXWvLOgVFqUEYTFN+BdIXMKBedmd\n2Ctm\r\n=uVuA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBDO0NjvARO7CSim2F99TBmWPjFnEb2efJZyoaWLGyXQIgGh0wmWCtzTYKVqgg/EgrAMWGmyl4nA6awpTyXa/m2mM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.6c0ee901.0_1615934363141_0.7993223714351365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.7f0d605e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","@material/mwc-tab-indicator":"0.21.0-canary.7f0d605e.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.7f0d605e.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mCp6z9K6srpqdr2zFjMNj94gz79MjW9Mr1LqWFjUkuxBiGHzwSZaXs47N1OIgoLrcAsvhWt2WOVG1IxwBu2Uyg==","shasum":"f4a11cc6810e33d84c42398d7ea451de0d5742c5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTSCRA9TVsSAnZWagAADEkP/2HQQWaUwA/UUYMoTPZ8\ny67nf690ELSDQmE1wN7fRZkUYanhONzeRMqvcWSeRXuotsGL3dtmUhN+HbTF\n/mSCHq5Wv06otcskjWhS2g+xi8CSeQC7s5wWdL1E8qnB/yPqjA3WRbLEz7PD\nmjTSFSMUIfqCnPzxOoolYhIxjAFL0MRgrOVyapGZoojtKzdetfoW/S915Yls\n8urqvSOwCUAHHDDp2cAKBeChaOtu5uyF9+Ti7TbAL+XUVTDV2g+gBS6YggKT\n7tTQgPApmFsYStuC7q/V29HXFIR+CqYIebt7o94iV/n+A9j78uTOAKYif8dt\nRpDzMbeP1qHS9fQk68x8URH9Sor2QJ2qySEctINwjqUiF/TGCg1tsR71Erkb\nLi+BTPDPX6bCXixfMTS2+8sY4yKHM0jcL4Q9U/jrN55CglgoHKY2IcEuSVFX\ncJv/X9mkmjTzGgXeG27Y6X9BBnT6tyjlsohsC/igwEEhwRikV2ZGIEkDcynn\nbV8mgI1QVEiGSV6JgolwOPSFHAHFJBTDyAY42fqD9Vq/Hv9Z5PryVd86yscR\nFOJVPEYuounoxMYfyfjX+gIKG2h47lfVBO5jFD9XDGD/dGpz3MlBu+aI0B73\n7CuPsw1agKC5Xct89BtOhUXIVDNsFN+iudejpqj7G8fu4yrbHh+ZqZOJu8Sd\n1sgC\r\n=T4kw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZjo1pgEPl2tEbbGzXzvk9+ZTm3W84PDvxQ02MxN5soAiAEBGVMTq3VxN9CiATWIOWSsiswrhe9cmuHJ5YsIelrVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.7f0d605e.0_1616004305742_0.1593921236783793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.572107b5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","@material/mwc-tab-indicator":"0.21.0-canary.572107b5.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.572107b5.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KLKczitEYIrLjrKkkp/WfFtSMBnF6o1zADKIN+nY3LQU9DVA+uFgyy2tau80io7F015iJKxZ+EMi+WPvKSqsAg==","shasum":"a8974ef9f4cb5129fec93cbad0bd8ef600aeb5e4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+g9CRA9TVsSAnZWagAABaoP/RDf3WO6bcDYORkx3cFX\nkHXxhn6qiPI9j/3EUMggm+2yH7jUCgocQsXgHcAFs5L81YRJUgnueRJ6ywQW\nRpJeAVdKH16yj7CJiDCg7xvEFFYh9xOIMntz+E/wuvOVmtp6kQv62R68OaKu\n/G5VBZb5/++tQIHijWi1WtO6JUARMbM2h2o+ui3lKjLhhKzUUtUbCJnzp8k3\nYOO/nM1jZs7OzftFcXTcsmKqKg+08eRNkl54WVIV/L1ENBj8zY7vEXBHwr2L\ntkKePaETNjSNNHk5VgvL3a4/iYA5xJDYIhIzTBiepQqZGICwIjH5fKRmWy4O\neBv3iF3Qz+DcZBqZsOVL5M7CDSO4NJPwzWbHf1P46G5Q0lHxQY0L0CD7tTCl\nIbhzL/bXYShqETmSpIej9XilYuzdRopLfmbnvIrbeTXT0BHtUqGQII6tudR/\njkoGIO+v7cKZWHapfnmK1evyjgF+0JXTLfOfPQrMoE1vLuaJOIhE/RCMCn++\n4ABs8jTnPKfNoN4D+0LjuSXKV3cwt/nUF+NyYt7mq4GzieB45nN8BIT+Em/g\nOGDoWWe23lpwuMQui58/5PVvbeevyv53r4fWSP6zJXaVPdIeRoIIF34JjFBb\nHhQFpKl0QbSPo+ZHj04SB4CayGuTPb2NRmMxkNLIsMZRobGRR3k6rzEW4NPU\nHnMB\r\n=KBRw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDejttBD+SV7rTcttZkuLIFW0TyE2Th0H5aO5c5IfBGwAiEA8fh9RZ+THaiL26ryOXJxdGXNy+++JTt1PZYKZlkwzI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.572107b5.0_1616111676635_0.9710295379703993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b7b220b1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","@material/mwc-tab-indicator":"0.21.0-canary.b7b220b1.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b7b220b1.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BGymnFfBombeKWkPhv9Z+C8/m6UQifEPbJuynL02lEDi1lDwWD0mFaoGjWczgdwmkPYIfowmNtW08aHljQgcHQ==","shasum":"c63eb5c7aee1c51a6ff7b49bf6185214ee062388","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5HCRA9TVsSAnZWagAATpkP/2lUgqdtZIUjRsifp/sj\n/5+N+T88PddVcCoUp/qmBp7A6hGxREwBG1Ub3M3EnWNQ155S/+6HHDYMNBg5\nrdmYNfI8Xf73y1Gla5qCiZnpRbaJsVj0UBtsXXWOW+r2oZ3+bF1epKPkMMV/\ndrwNn43C5BEP5Sb0TUhkSnrx5TbmZe3bw+180PKShHr6ZEHVCESS9kE9XCZU\nqnaDLs0B0BKvgy6+sKGwgnl90APX6ZDu4eUuizIcuWM9XJPNeHhzQ32De5VL\nBm8PNyWaVn+bc7se8Vz3kZVgHnkih8tgJlXXxV82NvMvuJTNnKTXoAZD+aE9\n5lFtUJKrtVhsjDqZ/j6/V1vgb8k9qZ8Iob4FpPgKZP1tgESqEPL1GHJUZwRF\n/RDwKj/1UyyBPEs2GbdXEnZhJwvFbCwPao7SdSYq1kPnI6/YwobPUyR6jmQg\n1eQLv6nCIryj3iLu+03bppFWz1b/1QnvCwo5pdWaYWpKYIxRgjR/3ENU9zw3\nqZdEkmvCjH6GB5RwpMpCJqcmSnQFy67hrqjThoeCkk9ZaIQI/9ulblueefFP\n7KKhhG2AFT2XbfwDqQ2WX7ha/VCxF/IsjMdbPf3PLBRyDhvUjC1Q+P+pyvdy\nu0tOdvDFM9QSRHGrEOM5LZ9mN/PV/cyA66asl2xb5F7ZPiqKuiHRhl2gcP+R\nnEr9\r\n=plCR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVVN5vKSG7R9M5wdxmdPQq9wDcRWaoqYYQdAeRWJj0OAIhAPpDgUEoV0+BPkeC4xGaajYh1gRAqg9yPzcAjKjHu39s"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b7b220b1.0_1616113223520_0.0670006944982684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.233b2de7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","@material/mwc-tab-indicator":"0.21.0-canary.233b2de7.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.233b2de7.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QLpUsHgJp6Kp3RrrZDdZ5XIo+4ogldNDHKxqGegqxSpVnyKhVOQ4xYF+HYNPDyCogahT9izMVr7AbJw9qKkLYw==","shasum":"53c5fe38c367fceefac480da6ca507ec1d75d226","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO24CRA9TVsSAnZWagAAjwMQAIKysUmmB8lIMT+vFOPz\nJtHm91YTi5TpvWOGJ9SPqLy7HIswwHnU51U/d8JP8C2FdZsAWi0Oy+Vy24Ml\nQq06z5lQdXdtUQ91d26mZlcJlvopQ/4aR50yeCUhx3xug/OTi735tSHeAupp\nIlCAL1C6qIo1GEtc7ovz5Wh1PgvOFQwsQqQcwzzaEV7l9QGQnt+YjXEEDVL+\nhOKUu+jhGPEtwnQfZIETdT5AJlLq8pyb13UgvEN1xfKlwqsuxsaFo8Q2Je5Q\nNl7dPW6AoBsvMLbMVLbfGRRqgh3Z9ukLZVCccqBPHBH3mPCpjl4osVW//dx7\njvQDUjZLLqObKA8mgg7Qq+bUhk5Zv5KoWaIogqj1cPZTTnkjpKUk1noC+HaE\nNHh3WiDROH5LtzpGzhzNnkVrdizfzlLzcsdAibYXpNoVAm1llAOUUBTTWe1A\nSTG7jMyN86T85Nww6Yl35xf7lNPvzLoaafBova2TrBBnsLStgous+B1JHanj\n9gHwL0jSQ5CjcQHu/aLrsIZ873jbHRaI1zo3cyzxHlZgEiEYNfS+Nua07Ttl\nfAD3QzjdOelvX+tzEI9KF3E94SBd/6G2Z0igexWo9eoTKwGFH9E+Lp7meQYh\nKXvICwylgvF4LdnVLaz2koJqbo0hvtB3c6O++Y82uQhC4VYwmXtpyPfuOvS8\n5Viw\r\n=xrFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB94j/OSJAXTluiCl72r/33W0q/2UK5XhTIwfXSsacLLAiEA5jVhai0K/F3G23aqZwhOYXowqL17iS835FaH5EBvmQk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.233b2de7.0_1616178616102_0.4235088895190704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","@material/mwc-tab-indicator":"0.21.0-canary.0c1a2d97.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0c1a2d97.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-anuYN4vFzMNU5yeZfmRhfu/V05NHpIGfilbFLERwwsihAgQbUWYd5COwRXIAT+uv+XfUEPoBPFLDsCuHJtstWA==","shasum":"f19e5cea2eafd3f29900916296fdc69d0a6aafbc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXjCRA9TVsSAnZWagAAc1IP/RqFT1Ok+x6Hu+8akbAd\nRoOdUjVAGzFfrfI1/Gg6i0kUFAybmQDAj+tATd+a78FqLJH4HA70gv2dmWiJ\n3INq2R0UiWdGDnPZcNBlOWrT8REyelIYFJMXnB7TNiyKxd5u3hfMrRarj+ML\nv+EUjAV8lXg4YDx5TQ0/Tar7axkTDODr75KoYNmEHg9X7rNigddo6RQB8zz/\n3fBivpOAjU+TnvIiQsueqkgqn98dnWj62Yj1X6VD5XmxsekBY8hPq7AW1OV6\naWa9d1EQ4Rk33avS0c5AYmJBQh2AJihXMP6KSC1z4lWQ4f/3qaiQ4UNqKhZP\nXUG71itmVUnJ5lyGs9VyKEVomDpntVcUh1BdmNLdXaSWbcxEN/dIcXv+Fd4C\nD9iHpdKIWJoVFc/+tjmza5yhvsdK0aqwxn2tZqzsIOf24fbUKiI3EV0hPCzj\nI8Zj/0jHV+fFTKZyMD+tHvXSnwlxuaD1b8IMsKg64aTC3avDeJuWwXCUCJeq\nsKPeRyeF6l4n2eDWDBgZXduE5Abj7kdBonn2dAdwzt1b4BzluGJ2Q8zvphBp\nTqVxJ9s6pUORuFRfq23MP5fwdUfj4nv0gI1ZxEYGZ7j5UcSavzR/pAX+Sd2R\ng5R4avRv5uEcrwMiLlMJXu5cqlu8MrWEZd8ntojTy2gb5AZ5+fj/C3ZTt9hx\nKSEF\r\n=QQp5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiJku35r0F9H9arW3KtAXxinYqv0ILecfca0Vpc5VikQIhAJ7uZXyRUgNtDbi981vGZcatVDEWLteIsj2h9VmS+N80"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0c1a2d97.0_1616188898611_0.1459604839890256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.57ca2e73.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","@material/mwc-tab-indicator":"0.21.0-canary.57ca2e73.0","@material/tab":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.57ca2e73.0","@material/ripple":"=11.0.0-canary.5f0fc444a.0","@material/rtl":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sup3NvAZAzi4OgsqvLoHvjJOwmLfBdKk6V2QXWTv9yB9rP5q3bH7taEuhVIJdnZu+rwEUG5/EaihWiZMwoLVcA==","shasum":"862244744cb6065db4eec518d45081c6bfa1c20f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiICRA9TVsSAnZWagAAEF8QAJi9vtbCXqpQIK0fqS6T\nkmzHUfUU104e2sHBnckkwobznlMp9QxdAzGVtwxRtSOQuJWInx7WhBCV1oMr\nn68YHYnnQn/zPC9AnDHmtfdLxQA/A68R88XvgGL7XagYUSl+culK/SvQy0hf\nekdMm5VydCCTXjJSPceSJcfh3z7Ew7K+3C9gvsXYN3v8Bg+l76J0g8dHu6LZ\nsXsbaV8wxVKkFmIkzNpv3kCa4Z+Ouvvl0V8VMMfiitkcorydSmHBkAIDHjKI\n3s+yWdgzzCNuRmGfmZ4Do5TBJpcZZ2R1xcV7wzhkrqaM6UayCDTvPUZwiaHy\nUmKfsUPip9GwaoBpOB6/vtT02IGaKEOa9f1jHcylf1nya9KHu9ZWfqVJsIN4\nyTCHrHZheNGm+wbzEWLHPjpFAX5uzFqC8TzB6GappE0mYuG9JjtD3y3/3Ifr\nmFUo2Qq79C1+JTPDJhDhSycKMfHyDpoMlpohSo2csANekYlbV8Jc7/BiwngF\nAB1Fi53A8Vrd8/FY+z1pm1Pr5Y/GzWf+8DMqpQBHcteK5we0M33zwCJcPEFr\nCOy/b2HHJJZEpTc4KbYJYQwizENp6a5dwTXjY30lzqBDdyY+QvbHvvNCRQuP\n5XOPph09x5ZMNX47vulEM+9RS2gL/cpx64UIY7rh80mKEtyjIiNAtHtldrmk\nek8j\r\n=cX6V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/hpmXNbbWZehRhQnifynKK1IHaDBqGMvQUCNcdAFROQIgDlaTtMflQSu4b5LpH8zuPOQl5PStKw96qHQxZJkzm3s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.57ca2e73.0_1616193672340_0.8275467617945607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5c058f4b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","@material/mwc-tab-indicator":"0.21.0-canary.5c058f4b.0","@material/tab":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5c058f4b.0","@material/ripple":"=11.0.0-canary.8943b991f.0","@material/rtl":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WJP1SWwivpikM78PHmWUfT1L04osDL92d3X+LEIMh16hcmEUXlSl7K2PIpJ4EOR2nZm8Hf6vwKIhDrhYIA76cw==","shasum":"609ba8d8947d072cdd6ef4fe182df742a920f3a8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUACRA9TVsSAnZWagAA7wAP/RvJWkFBRMiHqRe722DW\nGlXE2kQNRv/jD31AOXRGQnxf5dUXYU6VDAmxVI1/KhqMjNfVMMz6XRXKf8wZ\n7pK9wbNEkyWSVJ1xgAU3LYtzO6oSraT4mWXWeRC6o8ZlPmK6YaT8pq6Jcyvt\njEJUlwbBk8f3Hqh4PMQy+OHqvGzS7EqrNAMaGc76A+Te7ur+f2NtTKGf8Wif\nSaUEAWVbUDKNGxaJuiBPUdJVC9kn+OIc9ylsCvXxTSqsL2bwONkwMzOBm8Ea\nDPOH/+noLp+3z0XorKz6MZa9vVFn9wX1mpHEGNLI5XyL6KAYCJ3syjn+qmFZ\nS04ui2B/oanYfWNeFlmV5TxMq+B8eGCt1PPTZ3bFDkl4kLA4FLddzEcTSZH3\nUT5WcVKSg7zv02BoSFyO0Zo8zGB2Iv9p7pL6XtQ99dnNdsxJrbEC4gj//MP8\nhvQjIsLr7y16p93MauxyNOK/FRiG7ainSOL8rCPoGwFg7165Q16+WwSakSCr\neUjyQVaXT4PVnl1keUIXmLZUlr8MDCIUD2D/H7LLkJyakJ24SV9Ng1Oq0xN/\ny9eWO7Mtl7wB2v5i6APa4s6hMkNnv4iXu3j0GmSlKbu1rC18McKzZxgihNb5\nUBJ20L3d3Xz+XAfq64+8mmgtxcYjuiwWOwm86rKGuAJuF6UOX91M7ENplvRw\nX4y4\r\n=WUh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2xjy7DY73kIZyAYdDvN3ysVdfvYvmciL+YRQ7w0L9mwIgUSuoKZgG8dyJe9q4BSOGPafjSwfigcrmJ6IewCXENXE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5c058f4b.0_1616540927811_0.9172830894458839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","@material/mwc-tab-indicator":"0.21.0-canary.e27ef7cd.0","@material/tab":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.e27ef7cd.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CKFrSdsPhGBKtlOBij0UsRAMOTFfKDZZ3kVnJrUGpsy3VmIGUkIA5509KtRJ14lEyDlLuDSiP67w+YGt56uhKw==","shasum":"b9b231454207c77ead1919df26f8217e518e21b9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YACRA9TVsSAnZWagAAnIoP/AmdQFqe8xuPV2bmyaJz\nuk6MxrBDX0pAUDdPsxQLkjicc4r2xpvW1aOOwMYGIzixcAc4lG4E2HpwchPH\nKtFwVdzosknPwF6pFtLxaJMYWsN9v5qSvlcY34a8huZvixCLFkxOap0jVkhw\nkRLMlkjGJ6urGraFcW9FgRKmGMcJztOEle/1OEBK4BuhfvjoPvf32zW62T1q\nshZuMrt1y5WQxcrDhPv7C7tSP1ix+TG2JBuUFRmb6PaK6EVhd5FJsXi3yod8\n1K10/ZL2kclpvIbYCEwAiDT0tDmFCfVICcpYpgwHEyYfl0m3shf4V3mhhHvz\nDKg+RIxtNfkY5/96vdks4W2Bxi4VLr0JH1shM00u0wDUf6j8oV+dEszEmdHD\nZJCTRB/3uLjashVcwRAIXw/HA/7RGzaZ/tLOXLGamtPHO6k79Y7L8fKBfpwe\njrqcXt+YB+fbUvpEb/iKsCP5pZj73coYAfZkOGFq88JK6Bo7J06ta8u1tPln\nKeTsPwC3mduavYpFei3PNyzAsJtgimlx7qdUmBR1vMwr4WuMV/NMFzLSntXq\nEzSuBCsCYjGiHe3IXEWcHUFbUKuFYMUSK8VuB4Xwli2nrOX5ztxXhiy7Nm26\nVA/kYWX8wny2qrg+neSJlNaFOv5rmtfkeSNiFwKE+S6mIyoEQM9Ef9LSEI72\nmIjK\r\n=gLhh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5dcasIXrcNkXqUAucnl3zwY82mG2rZ08WVBZCn8UHbAiEA+MgibwjCl1ueMW3YRvUz5dC2i9RGsTVFq206fERBByg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.e27ef7cd.0_1617135104104_0.8269104309056037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.15c09e74.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","@material/mwc-tab-indicator":"0.21.0-canary.15c09e74.0","@material/tab":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.15c09e74.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Am6uXW5cFvsDViI4G9yoAN+13z2SKdltOzrUiDI5l3iB3aZfVHVaZbZ+KGkQLm1Pq65Wb7YqzV6sNRbby47WaA==","shasum":"425dd67b143e978a07aa8d2712e8185737259521","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKfHCRA9TVsSAnZWagAAOFIP/i86+utfcljW4uPCJP9O\novb1DzuVpx+7fkYnSNZENBC541QdfchRePkWWhu+6wqFUR2hczgefSkL5ZJl\nsRuAemrFbWZqKy7c0dtaVSzxx6w0cAOxnza0GkFoJaXb9Bm8bvXuEfdwC9Fq\naLlVY5yXtwjNBFTa+dIW9p7o7AzJZcXXxSUO8C2cZIAip0H0hRnVkoXdY5Vu\nEX7ln7DpLaXkyRXWCXTyMXPiT4cX+oIoTy8Vu13tphfQLRVXlK9yTMsQ1gqw\nIj3iov8Flcg+Viz7P8sKPXRXzHcYhWPe/KWsHTgj4SFPZyJ7WNBm/VQ0RF4O\n3ZUa9jwPorHwkQ+HDtny1tu7m4EptshzeOvbCUT1Rz/qX6PAJELHgsb65XAM\nFdzGA0cupdo2BJcRzu2srD3E/x6gUsNbgVFYIxKnwn8i5+cyq5e0fwTivKo3\nryAuuEEH2LGwcW+GqWsDEDJM+HoVKpl/uzna8VV937UwqvdxccO3xT+jmRfV\njVNepJPGoZAHD8eBHfe+FB4F2UGw8OTR+6Dx9EtpP6+17I0l0nKs+26CXT6I\njdsetoAwP1WNaK28HgRPiXxE2cXsHQJKqKneccml4ZklvcDvSPF2FP5/oOZK\n/C2BFfDqeBeJW5wOvpXDe+799BoxWka4eOAPBLzduSFYvw/aKAi9VuSHaJpW\nz/7Z\r\n=XZdk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYZfQ4j9r88PQRlIIGjM4vyyZCRJzumS7J4oAj0iXGpAiBr7XdDkkto2quxfuSAVWlriB8oap+3bw2tg2UcxcEgEg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.15c09e74.0_1617209287196_0.5781433084568812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4dc32be3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","@material/mwc-tab-indicator":"0.21.0-canary.4dc32be3.0","@material/tab":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4dc32be3.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3bQbHklZKlL5x9tswoAZ6aIJVMTtL+sAEi+XuAbQdnNOaS+C2WIpdBv98nX/mEh0tkfLCwg2tyR8lKxQQR/IIQ==","shasum":"a50f537b7665f64610a130543159956bce00b2b6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpUCRA9TVsSAnZWagAAxMwP/2v1EkaHcYka2gGFmdU2\nNfPh9CQfmzZU4s+cJKPbLx1xOPGrsKwgmk9FCdBxulNPaJJQli0Xbs61VPXj\nJNYk539NSA+1CcDU9qIQZs2JsMVqcXKgEuAamT7H9RaHNc/wII51omKdRHtg\niqU79uMY37pSIWzeH4q8LPu98b/YGT2fDvKrtKLDn98ymlpZd3icJO27WiyQ\nD8Yo8y3cW9jx69nU3Aoo5M39PIfNlR1GNRJd4jvJwAMxgqbrruVnVdcPKQ4D\nGU0rT65sVfmbxL/FQIkCZ4ha0NAULnOPpVS2aIU1htRN6FED60owMWmw3mFx\n1b/QZnFmDzr1reCRvVtvVjPMxBXmqoC9TIfDo/hKeiNrGjmd7N5ThT3cpHjn\nta/pI+euzXv5765aEbsi/genqHWRnjne1A/I291EfHY9TZ1PzSLRZGzbMSxm\nQi+ScMKFT0reXwCA5sulK19nzeCm6+UXB8/GkLc0Fo5skecGuz0V2OommKHQ\nSjtFlyjwWqDdEOkNVvi/lTNHELrETnqBxMIzo8ePQ3jNJn7UNE2xoGnxT9fw\nD+H8qSj1p7LO/2SpumvGCn/yDOMXF89MBR84kk2uWjlG7Wef8taRMU9Z5H80\n80PFkKoB9x9pnCt0NP8PjVn/gu39NiAn/M+XlgklXlYNLnM8jQjl3meYxoZ+\nG02Z\r\n=zfwY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAu8hsWbR6D/908Ty8o0Wtn69bZo+rKOmEOSq4o/fP0YAiEAu+YPR3I2GTVBDAtR6AOrGI2GUgke6AkFMH1+OaJpHMk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4dc32be3.0_1617234515632_0.8352840831397073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4b717f65.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","@material/mwc-tab-indicator":"0.21.0-canary.4b717f65.0","@material/tab":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4b717f65.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ui201WkLc5onssuW/sGZeSgcduqHqZ40PD1z7xfUbb+maYZxygel0MjtJhCV86GWxkaEDKxI4CdRmRsffE21OA==","shasum":"83f01cac90e9d1a807747b1b0bef322d7427f1d9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2aCRA9TVsSAnZWagAARQ8P/jQSfpXUIuILO8dEcl3x\ncQLtnMqj2+doFxfrX/Z+QPLXUb7FJ3Hh3GD+GdcIs8GmIVFXObaYz3pqI/l2\n39yPQSGC9HAY2uSRqKaT+A6OCIg/evXZt4dnsc8mbQiWPhc1OyZW4HibYDBu\nHgIPqpFtTJWWmUF+bLRxabqPi7fn6jKoixeErhXJiRi/ANzUJhxOQNVZVn/b\nFNqe0Av3j+5PMbHS2EXCSUkOwJW7vouRaJyFd53+A5uG4uMuC2uhIN9qxybL\nuNCdFu459RyOROPDeOe503mYMDFYSxuRQt0LJn7XEs75Dw52yzQ5rHfDReBL\n7hhVwImFjPD38AEV3WNif2Q6DygQtryUCjilfgKOOXSOTKhg2/IZAl2R7zXZ\nmwZrWEsDf5dWyjeH3/WfWFtT9WRyUguhZlBFYm1DFMerYWmmL8pDUd3kStJC\ngoWOatfHMh0M45XpN/WZ9uaYRvf39gTd4XVRsWID7p1qjfIgP/sFzKT8+eV5\n9GRFUyZSFC+zL/KOenh4ihvXSwXE4R/9C7AgFNdW4uFwrnlKFUowCyT7S5pn\nva/3jLHADeEHdFcsWx8KCF3rEbq2y2ZgEkBuTMz0tGmsqSCW8HewYeR4Yqry\n14THt8RYF0xngERlJrlc1hgmpmodOEWCKhzWQNe66ZNfe0DKqg3B3biemYsW\nx/sz\r\n=jY2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNHEP5DWs7DIGY9QtvAiFj9ah3IXDXrtZFZaMnOpTHDAiAM+T9V5IKk+nv56qKrhIIVz3zEu0f3Ww4CiWDSU9ca5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4b717f65.0_1617300890056_0.4296244429599023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c6870f20.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","@material/mwc-tab-indicator":"0.21.0-canary.c6870f20.0","@material/tab":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c6870f20.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-i3VACNiRrNGJZsF9hj5xw/vLfnRSEyqyJrwWB5gc7AsiZR02/zSgMsakcff5dJu2CzI6xgr+n4kvJVmMrYAZCw==","shasum":"99cd94740cbbea5ba66cdbd3409b1f496dd3c4b9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpiCRA9TVsSAnZWagAAJbcP/0eFRpJBvsN5Vusf/D8d\nym3r30Gdm909ShNvVliIoot2J7p6xEf7qVQW+sF0hC7IxuDhQCGeO7YCEe9j\nkh7l6dhrZjgxOI9cgvnjlv/QrF020yTlA4twkyVqiQIqxQtvQNPUdnkjrBl6\nvU7K9lCcN8bpsYXQMNoJlRht5OPBxJKLZBbePoti5l0o4+StL/CQqs/ODjye\ng/k8PP2m3699xqKSpTg0WXVrAUpJZa5aN2ulMHKCxMycMUh5TE05KCXLw7RB\n4PzbwWbMwx7ZQNCgRw9ZVdn1pPeebN1pSpOyPrqy60qZolv9kDoQm40zYFUQ\nvvJ1Rwexx9TiuGWxA9kwHI9vgkJPPyIHVFPf3peg/n6MLc6Uvr7Rxu19+X2l\ndIVJJnwB83cL+LodSx2JQ848fPo0LtvypRzpjeqoaMcSXhOZW09dE7ESjROA\nHEUJsXllKKC7fSwOQHayA34RkCpmYmbmQNqb2y/pXvq9jphEzTm7Z8M1NIs9\n5fG0c2Kyt5v1/na41KtGiA8XpDZRawIFGm6cPzyKy7RlESH/93m0+ejn471e\n9gun+SNEzE8IOo4lZXt2VPGv7Y4ZprEykviabt2qsxu05I8cDAFmyp4Et4MS\nMH3lJdUS9JeaZfjyJS2pAkVYs3/KiG9U7EMAmxehxAfM9XJ5kOhjeXY625Vq\n/ITs\r\n=jBdh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwlGRakngSSfsBMI1r78ybJsFmyN8jDku9PhDuutqddAIhAKBFqzUPE2bRxmi3QAmCvPnWFK/WH9HRyTn6GSwU1Gqz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c6870f20.0_1617320546032_0.6442624238020214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.852f873c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","@material/mwc-tab-indicator":"0.21.0-canary.852f873c.0","@material/tab":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.852f873c.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FGfalIG1GMtThtYy8kZbMnfzODPE1Qe2HNZ3ghN9te5EOJmfjcLWceEm5ph79YIIVjDmU1O9Q3CKZYRgmz61xw==","shasum":"d78a0697cbf4cd0109271377776e5d6dad186b74","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoTCRA9TVsSAnZWagAAeTYP/0KuSsNI/17SIEgxiYiG\nfkH3Vf6u7QgifOAjRXzaXa8Qzh/XPqEEBNnH1gZ1fdwWgMBKyCg3cDlTsQBj\nQlhWoTinrUDVZNDaoOijorMFikRj2TxKWNc2QgebfUVfg3A/GkDbLbnh74n+\nrMft8lQe1IyiI7jRyJEtiF0dzRHxz5tFjsejthP06ms8TwxrVLS4M7Gh2eCl\nR4se7muAMHEjD3WoS7NvVDgRwKTTBtnraimiP36BdOqHrQpNl3vLRrMeQyFr\nTzPrwplp9YEHDx4Yl/yf6D3gE4urf5/25rW1U9p3Wu5n4P1k9uHj/L5phH+v\nHLd6SPjEVcmYNNFLM999TX61l9E8FbmCeZK89k6NuP78mhRNIBemmlrWv/CC\nbhOnd+7DjfUkbDTpXu4YVsKvHaaRLTZ8Y3KhUdpvSyLtKl8YRIEsCCSBibT/\nE4cbM2MLZtdMTsn8SZgaUeii8ga3G1sgJPS+hilEMaqTW+r4vw9vrpmewkvh\nueDmIEjdG7fmklOLe4qCB0yyU1qF6l2KFcNRl8yvUCFGcV7cy1Emm0fn36/0\n0/QCLI1uC6QBNx5E7mVRn+dFJv9xKuVJkf6s0Kw71YkEzkdjGSJOH2+p0/g5\n7flQSxqFirpXe5B6/yno5cPr9xyca1Gcfi9nORdVa6Ye+UWxTopbu48GIUqX\nReLg\r\n=at6T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqhnxx2nIGaKttmrZl5Sv49qJxcYBjprChaFKvYmstLAiEAxmREeVT2xkKjqugQ8ACZjTyTW2+hwW8CK/4/mYx2+Po="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.852f873c.0_1617340947433_0.08021231340860857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.4a674a1d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","@material/mwc-tab-indicator":"0.21.0-canary.4a674a1d.0","@material/tab":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.4a674a1d.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SJN95P/iaKDYp1JEVx3QDU909aHXjPZqxBw4VxukkAKlAIXzQA+06Qtgy1N9dQIG2jqN5+XPnnvieSsfOhdBOA==","shasum":"c84e9ac440290ed11725d51fc789ff835d2de2b8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3ZCRA9TVsSAnZWagAAprMP/3jLQWkAVyQPC5xCbakG\nW58+rtYMJe+bwS0n9WihfE8HVFhnKfnQmWNvdSZejbQt6TmQB191o3aowAPG\nWRoiy4l05IpEf1iqh4LcsaAALdCWFgg73ZwxYgs5XhugAImryCqmJU5mI5wv\nWDIza0Nd/IcjXAw6wC2UR7vJoVM7J3Cm3ugJxREMMkTg4WNVIySxclQh5AR6\nuTw+wWIh7yElXzRmlgq2SIAk5BkCU4ksAprUU65BlzIAsAN62VFUw8Sju5Zr\no9qtRepMrTb0oKeeOcc08kn01MG2SVnt7Y0eKerPBvTzUU1amIkxvclc1c1l\nzTWgyMJ/Q+L4iosO11KPoAYEvIEGlweNNwqsxT7YC6A1tmN3gvVN5mBg3YIa\npwsbpFfMKRpOtN/IhAuqRnTsvkk8M1OXg1QUaa8OX2LtaU8gnlGHL7us1fta\nLveczqYH88kM2Rva0TwdRkQua05S8LaN4yhFGT4r6VO1b0Meb8IYCt7jn/Pz\nvuajH6z8Lbw2cCsFW4DhvYJcgu2MxKuQhBDVU6l5lJ0vJothnTnLec1sHa4U\nU0JcGlmdzGnaiA8UO1MZIwmwqMaALRr63zTgEqooN9atYg9RF3XSuB7D+y/c\nL5s0Fh8IKwLGsWebRWvD4qn79MFy/Lu6KC4YxSJOfb751LX6ORnhx2Bcz1z+\n2ORj\r\n=n/uE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0MQUrwV8JRiF6tXpx/kmFgFZCHNdqZKldxfOIe1icRQIgU3jbdzmdnOZ+umAUzo+gQmfVhdP1cOsZL0ysIn73dJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.4a674a1d.0_1617374680971_0.8515900827187224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","@material/mwc-tab-indicator":"0.21.0-canary.c5b29ff1.0","@material/tab":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c5b29ff1.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pb70AqMr9eZr+kDpkJLYKC2KjI9LqsqmJ5Z/ew5IvHP6QYKACqbX3rR3l3MAVzxZPiuRCoceH6ZTcRkKeOALkA==","shasum":"969867718b4f9a5c0a7af6443d63ff36e01ca499","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03dCRA9TVsSAnZWagAAStUP/2U9tITpELdfz3nOjFvl\ndQ3tpXPEQJ3/lmTNqr3N0+UD2vDm0Er2k5/EccSgjapBTgFYfV8We3da2FWp\nTUtKNd5ETDYR6wODZVqs/ht9/uv4Oy+sntUMew7IlX9E7UDz8zh/ypDANzTK\nY5rMZYuUO3p7rgKnA59KL5xFKsR2TujRu4j1dPTv4p3zYS3JOVIYnI+uewY/\nrs4ckiNEdBw9GDKnx77UrRoffOlD+8Ldq5ww07+DCqH7zIefxwBEp8/43lA/\nByeoU2WKUSIEuMLsifM0MsfTsC7tjOtnsVvczK85Rd8sUSXNiwdnkbHlRW1D\nVNpLJWEESjvVRKWj2nFAW5UoyjTDDN/7WvrhzYZwCu1jcsuChsD1a70OJr23\nLkRayjyKxOSMkDdgh3M92bMrGR4yKz68fUvKkmSD8iuZXPkDsRwYJnwmlcmY\nez000ImvRvtkp4Q4+ADS0oCiziLsvC4BQhxFjtN1/jYc/aVRozn1AAVMaDbV\n2GfVAiHk8g5Djf4CDXsg+/t9QggVkJKXUyJ7jJA7z1K3c+1vDNTEW/Q9xWNt\n74G5Aej4Rra9KJ3t7fZMqBzFRr46lU8tuTa3JVRBbS2fvDk1VzNc0EIErZZj\nBhnEMgtFsLkW76WBzaVSNkD0qngT5hqoTv2wr/+1OUBiCnQ/nWimIEwTw3gH\nvULa\r\n=oIu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLNDRIMnviKDFtt7CgUE2saOUOueCpeVs/yczaVII0+AiAw7z9MBaoo349snk5/7o4WaQjvEIxy1OrUnOYnobPnEA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c5b29ff1.0_1617645021337_0.6319121119726032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.583644a6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","@material/mwc-tab-indicator":"0.21.0-canary.583644a6.0","@material/tab":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.583644a6.0","@material/ripple":"=11.0.0-canary.94f50b260.0","@material/rtl":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GcXjJMQGuoCs4em8odtcw6JdIyUHU3fQmIYfxzr5vV7AY4BMufh/HxcJ3PNpoMghUKldvC+moWN/PFb3FXYyhg==","shasum":"714526b839fa3f3131f5137c8c628c3a820178a4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04bCRA9TVsSAnZWagAA/+4QAJw2WNs425F4QSAqHKY+\n/AxwuUGBO0M9cI46Ectr9GTqht09JOSWz9KQbRTo7iZgr8IX4gdauXPrsfz4\n2ljo6llxUT3zXiFfl+jQ4SQTku/sEIrQ2s8tmSgU1TuBgPByv9d+gsnu3l2r\nUcf0dGseDpl7tFthcDqTg9N8NvQ4ut+mvOC4gkHNwJoG0LDCY9QC8jI8sZTy\n8gz1dARHvAQKtwZ4bb8SBkr6gk7qyI1mJJMXXVvVGYI8l/1SnqRQ/Vg7BXQg\n7qeJgl8WHv3LUyRerJuc+pSG7YYfgLr2liZMR0PhN80l/OV89Gdr5grP0EE3\nYImDCZw6KsZte7KTG7uLhPmbnpCfkLkdioHnp+CT5ibD64HKneyGduYZQ73B\nf8swf041kYQJzzEzfnapJV6FVcW3+LcaNZUe3FvSyjpTBXgv+gE9JD2vH6A/\njt7PZRgbgJu9fyKS++j3xPeXivmSDz7jssBywVN4HXa/euRCzHH9avQTLNLl\nDj2uQwlnasxFai1xSjq5BVxKiuKzJlebLoRB86r6nYxygiEKpGZ5nKnhb5zM\nMXG7wRL/ZmwfUGMv8HilcWqD3HporNW6ObnavrUHvbZjvK5637EJu0UGeDtB\nHq3GUjL3ft1dVmNcrMd5H+q95utTohuQ3FNiJ+Eg5F7UxsgTJHTsj0PgPcEa\nefCK\r\n=on2t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc9xh5o/B/08XyI1HhEfu3uTOsJYqDBxGbXJAinMkU5QIhAIq/lwQIxOdRzrwhc7h3guWVkz7T3+/sJTxIJ7ZznUMI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.583644a6.0_1617645082622_0.15425763666519843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","@material/mwc-tab-indicator":"0.21.0-canary.02ac1e6b.0","@material/tab":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.02ac1e6b.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7QHuLAZv5FTvL75DTSthDYv88/vEUi3Lp1hm7xVKZe/l7qtBnvpxp8cQSNWYG+1Ah6W5Iu6Oib9JO2VpcXjUqw==","shasum":"9c3d89633c1d3a31e3ee86a065add8977b608106","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKo3CRA9TVsSAnZWagAAFK4P/irtsWaTyd36KZHzA/Ab\nY94iSWBfmwnVc4AeZgevjM3TreOs/hf4qFixI38NoeG7d4SZ6xSEht1fq9mD\nNJinA4bq1DcDV6McXGm703EOMlPb6lY5NEM54P7es0+V2+DMS8HrFnNLTj0t\ner24dcLsDCWfcZUrWQNuXbD8hKEbGhvnc+7t9BBcwgbevxMxSii/0r7WRqkX\n2CF2DS0MhADVnukiqcm9NGezTr1oDSR204A5A1I7CyqOFpI8y6k/FvK8t5Lw\nhWyWNojP+W0QlNvttc3+nTZ6HaMbCCcH+e0k2YqnJLc0rNbEYscftqdd3Aev\nki5JexdtqGg9LsUSdt1u9YhTB8+M0xNmzuSaagsmIUM77GOlZpl1oQORKl1S\n0uypIEG7qOkhnceDSa56uLTYYt7Vxk/bfO9iO8cY5HwdYMZ/PWZpHHVnArkB\naBODU7NTcF2SNyXp4yIU0LztBgBWhS0Kj0Wlx/WTK9k9+JLJNKhoHbzDNfSt\nO846ELBDy1oj9z+9TfO2TNpmGb/xOd34wHZyjTYOqp3anF59I2Mctn/ORUEF\nD+v3EHGLYcYel3Ohqms3CQg2R0WgtYsPG/3gd4kBuQpEZcwUwiKMD9zhfwlu\nK6yb8b+c7slM3IYOhr/v4Do120305Sty+SwaUc+92ArTFWG6vo+EEjv2nH0n\nngMT\r\n=iQnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEETOjDXzecLuhsMCTvV6vlfXN9EV8oq4PxOSCMJt94tAiBSieDK/j6Shh79LYCrGRKdE6Je9EdrtSaNl20E9rohBA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.02ac1e6b.0_1617734198723_0.712484137305073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5ac5856e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","@material/mwc-tab-indicator":"0.21.0-canary.5ac5856e.0","@material/tab":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5ac5856e.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UoSEbBTMXPZo8fs+1XrGt2RkRVf7yjXjpxwvnEuXqcyU4UWjQ9/A/2jwO3m0chMR4it0IYHiv45U0r51rtUgNA==","shasum":"52586adf761be769d530d71c5633ec64c67b4549","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKu7CRA9TVsSAnZWagAAO9YP/1BeBFXI7MITSr1GKHq8\nH6bEWaz4ByCf61t050cjPXrwFbYCKBW2bc0o2J2CcgUlQyAMud9Aa4Z3SXKm\nH9YZxWXkoGRbZLCWOvTzppv35YcxnJWbvSK1uzp7yhGeK9v82F+vId2GSxFx\nkJdjyQXeP2X9NgJcQ5X2AZuvg87mILEJWDllmE0YwWeUDK7RJO/KcJc5Tou1\nj7Aipk2XkCy0xxRooQq0KQ4xzhuQVD+h4U1ufJFBP46PwLHBM60vMeqLX0Cc\nX2L4uL8IYd9dHZbA0dP5UBhO4nw+PYn5ExeN92rP9fzksJH4qWcOuKFmhqet\nBPVN7mTw0P+HQC0cmz9s9uLP9tLyJ8wmfndFFfEfIJBdbZCNQSWHrbmvoqcQ\n14fPp+MlE+vnx10THY2WteqMVFxU81UqW7hbPAe0mby1HTO/ixeWNLcOoWaQ\nQEYh7YBhh2WbOjxpvBrcINlIK10NQnDzvvjLqZt29PU47PxnYcoqm/JLSEC1\nE91BrfD0Whn5QdfUSBbBY5cTPI54teAspEcuuG7tbVD9rVUv5QewiDr5S51L\ny4FRwlEB7TDy/aVhw9FiAjVGr++2ZceIo/Rx0jrTebxM7oAYur9AlSEjo/ql\nfuVD5o2+K+NmUNW182lB6azmieHbc11CYzhh/LAEDIOtZZlBEDDYc+bn0aVp\nep1h\r\n=2QoT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAvEPaWdYS+dng2WwHuelUizD0q1aR9tzmN4PAFlr/8AIhAJO6QYmeBSgbxwXWs4tv9xUg15GfDr8JJKksShaz26ZT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5ac5856e.0_1617734587515_0.11346816811041771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","@material/mwc-tab-indicator":"0.21.0-canary.bb23dbc4.0","@material/tab":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.bb23dbc4.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JTTsW0hT37RWivRfv8MosoOBEeJ6oD+F5Jlw6WecDEsxAKGun0fxLIdR3BU70dyy/o9pGUkA9w0YTGJI7R6iPw==","shasum":"f6bcf44d077570eb274bd4c2c4fa8dab9116a995","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiL9CRA9TVsSAnZWagAATHMQAIFkey45MV/Eu7lw0Nu8\nf4VJjnN3oZxAolLlOXu21+7cdJPVMMY2cVHMJ72dseOhKKyj3pGdzk5zFDci\n1lMC23viGaBnMOTo4aWFOqiBhjLk9KTe/xZirYsjUPMwVfjBX+ampjwQvZuK\nyehg41COzoEjrvJa1hvjG8TbQ/P1h4cpLyetdYKjaQcR+aEw2YxeFyE35O11\nMZSuurQJJ7Qadlf8brx9zNkjwxT+triG6kOXsO3lutxKOy/WOKEDZxH3eBYo\npW1eJqOu9jhkDCf4n4GYCB0BCIMKDlHHAS/SbgT7M5o+nRmI9hMkWjmiR/mL\niUHlsr9yBGsXw1nMLvCDY921L95yIDl0hWwgEcio2Y0gq2K0sLOEknGWO4q7\nM83jzNsAhRc5bdY5UEL/7XFtYscD0DYkc5NplQFpX+QSzr2W5CyQ1CeKGLIY\nZYfRfZM0+L6RiPrJpSYgvNjxS+BB+qsqsgCjjmaZnivDriCj1I5Yvd5chKQK\n2daS+qpFjcYl6w56bZ6gblfhxVt9qm0o/gvQi5VxlDaaXnMqKKroQXUtC4U2\nXnYBtQKzGQY7st105yy3r++rddWkqDZBbfWFH23yvTmfpWPac2+pMKMKZ9xW\n29Isx4IU6wOlySuWZxOuMbkeXR5I/r18E3bqo8bU2CJqdeZwn9EeB/attvLv\nNsSB\r\n=iqB3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgGrS8+G5fO1vhVqxImYV391DmS2YfLTj/ndGDin1qQwIhAO93ucanQuWmzBnv+fn+EJNd+tn/2n97UJkj73gHZJNG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.bb23dbc4.0_1617830653223_0.04744786860860839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.e539904c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","@material/mwc-tab-indicator":"0.21.0-canary.e539904c.0","@material/tab":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.e539904c.0","@material/ripple":"=11.0.0-canary.c91e8d141.0","@material/rtl":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XkPnfst3nM/IDWZZq29TPC5heBDC0jgTxG8QlfBdyKqX6pJ6rZ8Al5pe+/niF7LnGmBEYRR4s01HdK/SIM59+Q==","shasum":"e9f271cc9cb10f0c413ef790c785c035ee33e34c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UqCRA9TVsSAnZWagAA55sP/0MUgN1pKH/cng23A/3h\nP5IRa/fQnwVVtftmyH33nz7aR4eRJ2cqDozb63KSDvKTlt0BGGyb7Us7Y9F5\n2qncNvhOj1oM/o6QZwvvY5eagX+uz03zI60tDWEcCnWYU8GZ+Nx2czRJfWTz\nSaSqwiNUq9muqPo3LBhCpSq9i+DP32BgwKAubSYYi3bhu8WCeiIBp/vVYZuu\n7jOWSxkSZS926wU18MoH8mk/5IzSnSEWBtQCO1hNAd4hqAI2ZhqCQX580wp9\nmj+A3f6aMdm9iDkjpqkTt2B1YbcWlHqz4JwdBYguo8gBTUFeiuJ0fBoqFDK1\n+EoUa52ruSMye6iftpJqF5cJ2oMV70zyc2E7ZRZU6Xk6j/skcwCaAQ2K9gbM\nod1sZEXEgcOS4mJLaHJPkNQmrkgbBaSisHjMnrVpFzyoJqdtoclh7mDpBkWL\n0XT9NbIjpwjRilFDYVAc4AgraqyxIx+94wMCpu70CJUlzhwqUaX7Gfs6MUHD\nRTPVOJGF4SIWreG+NsvYfwHdgbMuoqLHIo+3y8m4hAjuPRHCr9Z+WdSstBLO\nOj7oVmZRsfGMDbHXCfetsADavGgMKv90SZ6MLjSNzEOufKHRZQuHpJbcEJXS\ngUlEO/NGwfuO7bGbCD7bgs8bJ/TnLA2HAjmqmMuFplnDlKe5Oz6cavG7cnWh\n35Hn\r\n=EIz+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4jHwzb13t4oHoByymGlL6HUEDWMpZ/ghf/OqGBO+v5AiEAzBQDQ2X3y1jb73DlbGakYvcggmyvxK/KrmNVkEYeHBg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.e539904c.0_1617904937708_0.4695611510022819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.a93ae333.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","@material/mwc-tab-indicator":"0.21.0-canary.a93ae333.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.a93ae333.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y9NL7m6lGW2dWcWIEeErl5HhWg3AL0T5RD5SSM4HZR2WcgeyxQMVJyDgxF4AZw3AmTP6Cfz39OUz8YOHGxUxiQ==","shasum":"5b28ed897e69e4c7cb23c0e0e48233d01643df34","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUKCRA9TVsSAnZWagAAHGAQAIwJqDXgNXHP+MPOJA2e\ncRVBQHj2bNG9pcFQA4RLxXudRzQ8TZ2nuVUt/4El+vz+WFfow68WHn9iUKjY\nqKvxmMsDQMEb6/+d6AOc+Ht7vkxfmjcQNB7arVduflZXeXCMl4ri8bTAl+F0\nTx6wiAYdSXYpKaodN6scLbZFmTuDxPET1FEWA20fPAFYyllT5rDhtpZpVlyp\nsxklNptiCg7yCY5at6djuxqy8tGuIeZYm0mP+l8mo0YUqTUcqMBInoQhe+Ci\nCS9Hpltd15e240FBn7wEDEWWMt2P/j7g1meNzUFzVdxwq9hZZuGALln3Sv+T\n0h3C3GNHeayIcM6K1xdd8F3mpGWh+3xLumeT0mtKSTgnDh5NYYxSkL/415ak\nH4biqx4Zq4ZYwbEYZO/YcvigF1kLwmDYVdIWIhkmBRJE2TUqhxFB2guh3u5n\n/Tpr4CcClneItpLq8/UgAV6l91IhiP5DebfuTX+Yam8w2KF8tIHOpKlDsx5Z\ntRqEUruvk0fJUOpaZBPjS1+jGgDgomBxs7rw59CH2VxOl5EMj9B2DlqGpvSO\nzbLCCe4pUgPlbn+t8AoyZ32pvQfGSMawspaCJn+wTsP7Jmh6HDjDYS6htRYx\nu0j0IkEr56gU7xLSz+VyWZsPNZwZHXTEWz3qkggl9iYlspUeXTWxf1u+L2hE\nWv3W\r\n=+MkO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx9IhMRDdPTXVU11CyixqD1CK3JisWexcZiZ9uIXxDlgIgYEiJQh7hysbQml3j3cDosvl94ONKFY6DWVNNTOzyEi8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.a93ae333.0_1617999114494_0.21511035805309753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.e142c144.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","@material/mwc-tab-indicator":"0.21.0-canary.e142c144.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.e142c144.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PEVXM2gcYibRAVJxnXgYyDbVZEMiJDlJcPSgVo5U+4rk3UmAHzCU+PEatA6+pGuqEgigD11l+8lUrmU5DjSCdQ==","shasum":"f7ec861c1a91302ececdd021412eff1439f39a3e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5PCRA9TVsSAnZWagAATvQP/30ukI4DRmrWX/+JJ5y8\n16L4zAC7VNDWGvDcuC+MjtOYo/Z9U5y9SfPo+tfMFtFMbKS6nXQXD42VK1Lz\nAcIhKENVJ+fj/X1CKH1CchPhfWqSgLuXvAS7Gv+XeLvzNrpv24mNBI90kTVa\nXzVrLLFVWJaKCwGM3EStAqW/tJbxdBvVOqSVq249cULRUbTkJxqQDNo1I/IG\nlHA/1VVgvIG6nxBYs2Bi3KXzhfNXwgpSNZITasn8zEfIU2TIWN5zBYJ8Sysk\nWIA0bbMDqyZxmmfBN++W+zA9DKM3WwmiImuio1jmH24J8Gpffm1mD8d/5PRl\n4+65ZeZLgCeK3k+iZT2KW2nbf+1PP+m6lPHIPSOhgPTQc7aK99JnRam4HbtC\nE+wruKAPVpOB5v10TB3yDi3GPyQiH82BleQzF1vGPNqm3JPp6QxceRirli2k\n4HI1yTKanWsAB2hsIaTu4pQmKXYaSYuGZNz2Ca4kPu0kyAJdEbzNUq0XBMuX\nk6azO03wJ2hkzSaKoCYw1UAbFUuS7Pk9BOneFqgSln95dMZxuOKtlPpJYaao\n2WSOtpHFdDt+vm6Tpl6Ehx5n2NZjjAfmQbQ0zqqxW356oqVlXIgZxC8e+9id\nSGmgIhEF6pf/njI4F8dLwTd0KjtwLtwAXuq27b4/iPLEU86wZ9+tsd5kHw7C\nfzTG\r\n=lNH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhydR5bL45Q5l6dTQMooHEQ3BygoCzG2HjFGzBP1zu/AiAaWS3YvthSCel1/Fd1Qg+vgFncqrM6hDD64WDSa337uA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.e142c144.0_1618239054920_0.3840476729593354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.382d7eb0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","@material/mwc-tab-indicator":"0.21.0-canary.382d7eb0.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.382d7eb0.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-upzRPQe2iB+aDdwOhoiS3s+nKkklUBKUhsEFre7kd9sY1rxLA2wYR1GJ2KeNSuCCu3aacLSY7x8hLqqFbew2Ig==","shasum":"e98f5058662340ed35421f4f3ae3db3ff5790a02","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQ6CRA9TVsSAnZWagAAtngQAKHeopWAESuO73x8u5Ai\nvHZ6cslY8n5RTallvKvoU6mwh9sloSFJMi5osND9kB8qJxUL9oTltyLHtAuV\n8mmbth/EgPo0h8A5hJpuH03lMqPRH3nG/JsBNA9zLog4OM35y7Pts08BXvgI\n0/V80xd82XeI0ZZrUP+Cu3LRZhpirrY5GcgYiacuPfVG7UBoa60n0jn5UoIp\nb6QwgupYujmE+1sQ1uVxwhmCidsMUYsi/OUZpl7YJaoOzdbSq+FIqThh7iSW\nAy5QwjnolW/r96PCtXG9NWsRVWApmxQmjM0phLAxMI57zJguA+OPupWldyUw\nJUBG/jImlfj6AlEansDpmpPxmPrOANj8FiFlANFcRV2BU+ERKi3XSZeps/X3\nZziTsW45zRGLS2k3auUm8BGPAUY4Q9o2vaS3i1wbdCl765E/YSpktkUpYZLI\nOxaKMyypsZ7RMKQ6IjPuF6f3lDLo0jD+m5AGI+mAEw7Ty1ltj43Fhc5pbqgt\nTlB5yAyUP+sWPik49Jg6k1n5WE/8T5E8djw4Q4QfQ/JMT/mQGW0FqrsHwAwy\nhV+n6AL7KraTnwdc5F3Uk2LIUdxeI9Z7jTrFMfWf/nPVF040hvHmo8srIG0e\n7PxXs7UdFeEZezHs5PuSiGCtdPFZ7aPefTNZQ/RPtIO2tsdCelm+405F3/yi\n7k6x\r\n=fcPx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWr6vpjSXoo75LxO3FU7O6np5o9lBZxORgV4jWLHWrmwIgNLBEMwwFz0pW8V+8omARqCqOb/68KOJOr/Hv/nndUPA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.382d7eb0.0_1618265145847_0.23849338295470424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.b16c7885.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","@material/mwc-tab-indicator":"0.21.0-canary.b16c7885.0","@material/tab":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.b16c7885.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9lNu6l5Y1J7LVvqt8Ra2zDdxdlmTIT+HVcaqDmZg6aEeu+BdRdT39a37CEHBF4b3UJ19rTfe4vU3rvDV5APBJw==","shasum":"c9cd7fe2bd44db665614c4b96f1efabae1a4c2dc","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwfCRA9TVsSAnZWagAAJ6YP/Au9WPLDqj//UQrrpgAJ\n+8biqvsocxpnPb5nJbEIZGDrnOYYprvPnt3Yp8gvmAqf92wj7jqUzRPGYKt6\n2Bg+226fwpRhNi2fHwoCe3xtvsUX17f4zea1ZAQ83XyGyhMSOgpNSto/yA7t\nT8yFBHu+urGIX5EkgnO/+k6UCOmIEMyEvoO4qCaM1uNDEPlFqiPHBba7SQ3o\n+sUqRixTaBakP9iyw3m8/aQihg57Xe5CtAmJhn8v6HPXwxoxHdFEvHQArK1E\n5VwTv4ywrhVcRx8TORlnHms/FID5ACtQOt9+W7VUdVPToljWEGbg/Gk3pSic\nYswBu9ylqZmLkyIjrpduI+kGzBR10i2JfoB20MjfMpv49lkrD5HpAJ0Dx1Jr\ntSStkj/vYSEO363jrnV2GPdnMnbzaothhmnsUhHRSlTfNGrJkn18R7AplVhM\nlRH12Bgf4PD9Ksp0yiiUqWdP69VkYSQrfkl0wjHHdont9am3/8KUQ0RrQ6tv\nYowMVi6rmThfMKvdItwwAPEpAYBKF1PI6ULdkFBB7F4ieqb8wIGR91d/qUqN\nWl2pecpqc3L1k0xVNGTBRPGpgBowqWzEiDxijrGjfs3LfJ84lUXu8n+YkmQ7\nDFB5t3pmRqJBSgKyWt3O6fsLXwp+4sInsQuOOlhnekFT32wmWDFswKuyQ66W\n4OvX\r\n=V6tw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2bcFJb9X5FR+XqUgchVUh9/IBzWatXLH7aDCPh5F7lAIgZiWAJ0/SxCQNFmp1OC4Z0teeasvc3iWRPnsdX82CHgI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.b16c7885.0_1618267166617_0.6042640788107416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0e92782b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","@material/mwc-tab-indicator":"0.21.0-canary.0e92782b.0","@material/tab":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0e92782b.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XwN54qpwSYCV+dsJ3SAU+9M6NeJk2GmkEtztCzQl2n596mIZ0ffdILnLtz+xMRK2TmfrF+9bw8T1J2IE894Vpw==","shasum":"d6baa2a3308c1c06a5cff65dacfe65fdb23022fd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3DCRA9TVsSAnZWagAAJJgQAJK7jjxtFYOjbtZi8EKy\nx1mQycwFhMOkA6/Q0TYWdv1gT9L1RisURofl+ztoLKg2WwqEtLG4he3bMuyC\nM2qMW1atCm6YfFvBIZJYv9uOAa01VHn9I3UmTw2a9QOOUJW7KyzPXR9+JbGe\nvw+wya56R5zu3L4FUTQZUGMCIarLplrWK9OYx30s83mIWFeD4+U8j9tw7MuJ\nCLMIqMcQb7t4F5Ung45RvMbSjhdODybVJ94DeG5R2ugqjXAbrjShwO+hB9hL\n/IBhlX9auW5y6NEeoa0edIIMNQ2EYZ7wzsU2BVT1MHILa0c031dVBovcO65D\nfQTV5V5kNC/1Zoqy4LKDvFpefIei8xXxeIfBVsdv6nEbwCNSd6D12uG0UQkB\nMPX/EZlIItEYG1jc+wLXhVs3hPqQijNP6bu9Tk7oXrqO4jnHzuvf3MTuHriD\nVw6KE99vwQe+7Xwj7BKi70thZ3X4yUDzltpbscDC7F/rI8vC9jTciqViujPs\nT9BasuVbWnKr+Knb6TY5HiJ/bVFvVtDWfoip8mWACVb5IOXXs1nO5cjB2+Xr\nc7JhzBk8lQol1sGi+NeU2OINvIt5tEXbj/IJDlqpgtxcB0EtZ5hzKc1tawhU\nwvY3UtUFNud082FJ7XQJnDRRAlLNqEaE/NiYa4uMl4ykCfxwUZB/fP43Z5g7\nPndo\r\n=W7I2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/FGolAioX+AhGrvr3coCFVW5z0EMLYjRz/mv+vubLOAiBvlb55ugp/dWspIZiRFPD9vu9o5/IrZ5zX1SbLrgzUtA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0e92782b.0_1618324931041_0.5742874194726919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.70b3a072.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","@material/mwc-tab-indicator":"0.21.0-canary.70b3a072.0","@material/tab":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.70b3a072.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VRzku59SOsE78ioCDBjnGCmBGzLj8LfABTL01bbkpk2CMOQSCQnjYVtc53qLwJgzqjGX//TmfjVB3wlBBzUnHA==","shasum":"21c7e7a69fbe4fd286403785482ba13d8b7b2ebf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2waCRA9TVsSAnZWagAAWoMP/RFLbdgZoEuGhGdiWbIz\nGORpQfSfj0pdr1gNB+nPHYqJGpkjMMgzCVK36lleArKBPFt7wmVWorKVjreF\nPsmlgURrTpYnUGGM+nxbxn+fEx/QODkF7E3OWH5PD4y+hoNoHayob0FKRbIu\nYnyywWvXnv8JSDEq04rGG5Ib+ayO6N7aKifAD2RDEBZNu6lrh/epNHhD5wyK\noKjFtwse9SW9S8EqWMGhnCTw0sWmpTlzAb8NSeN3wGe12TnwXxcc45wKRU4r\ncOwLpY/tCfsegBCVrtPMPK+ELuOW+8AjIsqJW3HbEjHpHEcNtcGlDwGBHvA9\n0qkn8ca4nMlzCcv0dBMQ17iIaWGWnYPdGH5Gu1dduS6j+IG57dvrE9nWEO97\nbQ0/qQnn6p3fzCnWfqLckk15adIF2YwXWi53MJI5ZJBFsVaSrkWaYcl9CIF0\n57rjdl7le7T4Z52p6qtv1xxqRTO5Un5thbnYnMkEMbt74nZI1edogd9u4njg\nyWXxeDPBboGY6pXxZwyF/DDi0TrP2mHTsW23i1uBKVG3diO07CxjzB7RtOr3\nil80DoZTANIe84AfYId3/1WGHekhU520vQkUUYcObRC73beJnVkM3JUjIRGD\nybQkWFkoTaByIZtVigESRVZQbHihyhik1jN9n2WhtcDRr52bamghTiFmTOjk\nB6Rw\r\n=H7sJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqm8noDHOyDajXmahFyWmkNTcqMjBjgTnAiVxju+cA5AiByDLt+z+xzpPYqIaNOnxR7BDOVlphPFF93HslmsdsCAw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.70b3a072.0_1618439193865_0.3272816068079458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.ff79b092.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","@material/mwc-tab-indicator":"0.21.0-canary.ff79b092.0","@material/tab":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.ff79b092.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rZUUyG1JC9uIqzm2we3V1AkQnb8Lnm2jf5e6YgQIRNECGhQQ1p+4SXhKezAifWn3A0MLfaP+p3bwZrqxYKCX7A==","shasum":"6802f3c697470e7e5f7aaab3784a4485ef9699ae","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0+CRA9TVsSAnZWagAAVSsP/iZ4aN+IOS3UUT32dRDn\nMhWcMWE7FSwMR7Rj2mLHNJfGBkj7c9CGla67XfVEmqXc1g8+U0ld17EYrhRg\ncToyTtrmDJx6kMdaWUe21uKufsjAXZz87DLYRUx6Gc5LQWRyf5kES639wMgQ\nzlZ/7QyvUwv7WXTR3tEP8PM1OUWJgt98nrT0y4g8RR17yhkWjrdoaV9J47Qu\ndMcAWo7nU0/aTGINCz9AsyzKeekh0iMSoQB6R+sMUpiUbyd0zX5fFpBPsmmc\nV/KtKoDrwTyxPuPoB0YbD7Sw+ocEay7EyW6EkoEoR/qWBapF62ZnDwG84Kjz\nHSN3EJUx8Q4gH0RUS019QyuPq/CpZpj8fQi5+DkQXfH5YxAYBgBCmRn+AlWm\nZBdrQZxlsfxXWpt/gi0TOMEhWrK8AMLMelQ27n+FZ0EaiXnGghl81X0LzmYI\nRnazNQ9WjCq+YAWLnDsuEpoHVij8AWWxFxFlQAdzjgqWembUU9mdzsgTm6lk\nraA8aMpyGzYwc9HYQBwpxbg/+uMMukLFRyOMQvWPSYzNS+BxHtO2fvF/oImW\nnMOzJCIuGV0+3I+k2L/NNR6T/R+BLRGo0qimZg5gPckSoW5KG6WDcQbV648M\noiVxah20F5jD+M+DxAjkx22vRdiFafVT+LHfuVuqGSbEL2A9ao6SmHyKF7bC\nChHS\r\n=7G3D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvOq3xdpDAgf35CGSUFRRl9fkU98/vx7gjTYQO00GLCwIhAIgOfKN3s0uMZhzp0X8V9CjeeWm27u6dy5kJcOVrsIJ6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.ff79b092.0_1618513213584_0.9245653701265253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","@material/mwc-tab-indicator":"0.21.0-canary.f35b2fd7.0","@material/tab":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.f35b2fd7.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l48kXyhThxizBIzWhF978UCpm577Pxg65Jng5MrBU5Zu4Y9cnI/1G81DYcNCG0pGpCaKsPjyYXlIzDc7GAmyGA==","shasum":"84251d69ad7b8e11434ab3aea4d11e6764b452a9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+uCRA9TVsSAnZWagAAYrUP/iBYy5ujp4WdrlGriW8M\nwWm2Dm5YrwZngCutGwa97i7ljKSfsE23ERuPKxhy9oMRGmJbHAml1MMkvA3V\nroVSCkOs2+c9PotIDbwOYF22dQOflbIMNAIfflsZtSwMs9tmw+op9mfSmr+k\nDBTBaRDwhLnwK+3jmVw5oqxJDi5bJZrV2E19lZiLt8iExfiajtV39XdU+rTS\nScWcqNBO46Vd6nRO0eJOZaw2dC4Vzs8N3wKlZy5DAsgLlYyrMYxK+0pT2g5p\nPv80EJHqZp2tUCaZl1Ukix4BXCUTqMQsOj0Wsm7kFYrzpqStHij+UlFibj6X\nzsReDgIcNEYkxfjogm6LMMSSqNxtBLG7c98NBAnbL/UU+kGlv/VQWNOUiss3\nDEqin8K7rMOxp8etr2+4QOp/GhAqO7yIKO3fATimEzwtpqIPtkA6VAKltAuL\nJflwFk2dzPx6ukAO7zzVSurfT59+waHd2h9di+aT01INWjU6q7bonT+Y+iOY\ny8we430jIblx22udjWkZruWA67ytb40q9OhyEtUXbaLqT9oAIABFeM5dNVMz\ngrgQIpXHDOv80aKZSuQsbmtdyp1ySiHC4w6Fc9FyyFNiKp92j9uxDfDdJkYQ\nUowSu4KnNdT2c6VjvajeREVXzPSensBSxkQkLVPNjd9fLoUg+Uzp5B3sH372\npWZA\r\n=VlCX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGX5SDOCCFboVpu4MKK4S2LhkgIJOZxvrgvK19m0xDtbAiAwUSkIwjCyoj61MjJ7Ezt5mH9SVJgI+OSehFEMwFxr9w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.f35b2fd7.0_1618513838202_0.30519835464743084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.11977cac.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","@material/mwc-tab-indicator":"0.21.0-canary.11977cac.0","@material/tab":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.11977cac.0","@material/ripple":"=12.0.0-canary.3f342c3f4.0","@material/rtl":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dynb0nYnPkOPyDxap64bNTKZqmznmCTelCt+0iK1GhvkONwjY4NCzi/iNaLRa527e6YqzUEqbd/scCB5IcwNpw==","shasum":"7ca0131e0bd74423cbce8234799176a896965e6d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOErCRA9TVsSAnZWagAAGOoP/R/UEV/kDDI19a7FvxT2\naprBo2SE00UTHKRWSaIqYhDaDJQnSktqa+kqozh9lZ0FOm7I0GW0EPb+oY76\nQnPd+tg+vznIUgVOmWGLrqovZBoR3AN66AgTdMhshWbDLYdAGimWUgSqavHn\nJuJtck/7agWR3VQ3bm8GtDMrSlGDNM+A2FcBGjm1mqroQKa0Vyd3Ce6M0JyN\n5/XAm2MXUKf44nSR5laSWjzTeyCrZSC6ImMlDQTN0F9tUf2hC+WXT3/gLctG\nCr1TpACyTzAnYdR9AxRI2pmEDZhgxfU8N3r/rXvlh7JW1/qP8rcJN+H4ZFmc\nraya3YJzMKwwjYSKhQpm3EAC4/xWH+rSwdjb8zpYg9VGSBh2qa27Ct1A7Xs9\naiqmV4FrsdN/+rR5fjQcA86/22GmneKHAXs1VnC/Y6hWLdTIldSaWFZeFrOw\narNyEcit3iR0RSfSFAnpNf6upZrootLl0lAiRFkLdljVZKc6mBKCP6/HxG9T\nGCVD707AykGDhQ0wAMR9jIkVm2V/fHShT68uAk2e3iVTClOsJXLA+qAEJMHF\n/BE2kwv33ZosldDl/sQ08HUbhNOwf7mkvYpwydJh0wkyTuPNva31ql4AAIAt\n/9vIe99+vPBHc2uw2d+qEcNfDh9d6YGBkkV44VLbNr4hvrGYzJSNNEhH384H\nWyd/\r\n=7BVf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8Qw6nAsIO3xthRWpJKWqImFQxrhrrgCuINf4EctJ2YAiEAmKGBgxvkFs8j9gUVlR6mX15H8RisxDka4O/5hPPOObQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.11977cac.0_1618534698748_0.6771094971372222"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.018ff45e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","@material/mwc-tab-indicator":"0.21.0-canary.018ff45e.0","@material/tab":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.018ff45e.0","@material/ripple":"=12.0.0-canary.cad489689.0","@material/rtl":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BBzB76DsTfn0X4UgbLy0NGE4jpYLrfrmTYZK30uBVrhwkwAewIPRMOr84q73YQBMzcHT4NKRmoaaxP2/4pkTOw==","shasum":"fa1ec025dfcebe1481d8afa74fc69aec3929b5ae","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3mCRA9TVsSAnZWagAAjR8P/0E+8WmCkDsricbA4RaL\npc75OUnq/1hY8AOOmzxRuTwbNNn3aMIVdmq1GC7fBSCTuPg5lw7ie5QBX1J3\nD9auhFObTa0hnziLawKdTuLzrR5kfeCp4ZGB29P1R6sGXwSF6WQxm+hyeShQ\n/g0jnNe7l39qWwfB9SjgmdTQoyPXH9/EdEIgs0efN57gEZU9Zsk6r3aucdXt\n0tVgyjvurZfNvaZM+DW5BoaMFUk873gfLHvHiWsx4Z7owuoVS2Gw5MCz5qrB\nQ1ZtEmK9SWZe4Hkex+brDX0lAzOPY9FTS4dj1n/dAYLlfZCTsarAfQY51psJ\niCN0gAXQdrrVOH4INgc0eVqnaXDOaik48a384AtvOk3TaK4x4wh8UP4TM21k\nbtScX2h9yJGgpZW26NJbJz4pRjM1b2OOmwzoQ/FSYlmEFZofzJ8j0OohoiU3\n7rGNFsHdQaH9OufKWGFf1p91BhuNC5p+UOCQKO60JmDfR1AVWyfTuMEyrBr3\nEYZ2gTBIXVi+38sIxtDTkeX1om1H/FIYpOYMz6sJI0/XIRJ+dIbtULdxhxis\nF7XX/XAkWOK4U6n3oj1RbjYJKLnRP2nS9UvfcYJG0zuhO3tEt2uy4/jwXTSm\nVm+zacUuvPNT2zzVH6YV6oawFRWaOZKN/zQc800vp267pyGXJ4SrfLcXMUgi\nOHlf\r\n=wmY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiDSgItIQiKHPXA7vndXw99UmsQCsQY+Omix/h4RnBEAiEArkYO6IJaFUAVq2B27LRrhUh7ApzZ+5w1llxiOTTNmYk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.018ff45e.0_1619131877807_0.5418556134600587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","@material/mwc-tab-indicator":"0.21.0-canary.c99d1fa5.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.c99d1fa5.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-M9mXOHcCuq4FvgbgN/kUH2OR2TPVn4VA9JJkFa5ck1ER19ikYEePMd/Gv9xJdgz/knQsS/Nsa3E0vKUPTq5UFA==","shasum":"9f67aaeebfb93c660a6822972f79057af8e837d7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxisCRA9TVsSAnZWagAAXjcP/3LuulIgvAMpj8WAFR24\nRS0ZuyWb9XYvo9J/IwOyQBbAV7uZfx+v2Cnsss8E6xo/xpSyNeWjGyI10reF\nd18Ba0C9z478hA/LA9pMR8wj263GSMraivwBWLntaKtn/KyKwGM2cz3WfIiF\n82r9lzMZ1MWJTKhmivbiZVnKJNhQdWZ9tK0Hm9LKZyxLYB8TlhjHv7RFrn+M\nap1AD6lJ8Vq37b24wwUd6D0utEuaLz76CeU5oxbtn7MSNjQPR/AtxkpMn94O\nGu/zQ4HwPd0enghKJl6oal2e+yL7gCOcTQqb6hVdg/2SMDhg71/40HTRPUPQ\nSQzEpREIbmIcsxGl+SR+yKDw03839DaJjI2/+h2Hmb/lTSrxcS+KjvQOOHfp\nYhisey6vJfQRldoJz5y8WkrzgloXPm48IEWVAL+u20l5skoIGg5K69MV6JZZ\nje0gEtyitCyCJMih/bcGA1iC0EcwTgvgVGLhiZksey/WoA9aLtX71UeYMGHS\nywuu0IsovIMk0070mOCZdl/KfBj8aIz1mrMF8o/e4MoVi1tMBt+21YULfbZ/\nkzBPP+nYKpOKQeE9pmZSoa1pFmnfMvMGCOb55ZQVKsFwaWFdbzmXgLCymRcD\nORTDIJOcdOGrqkSOrRvBe/ig5VXM4eFtlqdqILske/Qr9swl4Di8tCc7oXwh\nMvuJ\r\n=db5b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNDDDhr5HoYv8GzQuSzB+HwpuEuIGr87QnaOTJ3cW7aAIhAKYEQTFPSbyFrrzJ6NFRlggJ6j1ZRX/SL6rvZXYDBw9X"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.c99d1fa5.0_1619466412209_0.2556246933620905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.eea9b304.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","@material/mwc-tab-indicator":"0.21.0-canary.eea9b304.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.eea9b304.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/OKHOgzP/z96sbN+8sfzk89OhrnrW/edQcJKUBxrbNzPrgOC7BRADw71JDy/30HWhnPiD6OgZKGfkW0gTkylxw==","shasum":"98eb6c353dccdcc118174628d62379ff9ae49d3f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXmCRA9TVsSAnZWagAAh6EQAIuSra4p86H0kQ7OQ6IS\nS2DFOus6eazGdzptJdf5sR1EDleaYiyQJm9xPJcLKMhOu54l5S/ATN2ox8hg\nSAU7Z2yC7/sSfNoamUzgikD17T9Q3wrvK9jUTbdQzwGStmjdXrJAm26v8pAW\n2PvDBflFCA8G8Fpz1/ATnJc6//e/1O6T4xbgHsJBowJEIA+q7JW92XMTUWJH\ndMCkpmlvv4P2NksCblP55I6LqmbbqJ1SCjkH/s9fdak5HnSJ9XmW0fLh83NP\ndrTdyWUArNNyJlb9rvZ9UWu8LoS25uV8sMM1Se1/Mc7u1VpsI/OTaTGgG9yJ\nAFzGwIMdv/UPh/Y6WGXEPrW+UR3X4rDBcJlBUy+qmvkw2wAg6b0C7DofROVR\nnAI2a32BWoZ2eCueXOVCvXG5e6ffRx8XodKkDMNMtS/v/eahGhXd6pAycewi\noAY7chvnVMb6YqQzzq/hBwLLPq3BhSe6u/aM2Jz2pOhWRoQkieCX20y7hL8d\nLRd3GO4TXW91w+rTwNk2z6iK2ohV2p3DSje6b+y/Fv9Z+QcObHXQazF+K2dC\nhHqYwW4scwsR/n1wNF9gU/qwfh9DwMoPp9QAhQ2/ok0K6y1dndaqC99tP6pQ\n9BXCdHVAGihgc249IKoQcomws3dYND24fqdqN0e83HbVqoIQxkrVAJLD6uYI\nBKfW\r\n=ot/V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAC3ryMRZMMyCJh+goYaRlZ+vLKJ9ImuDjsvgG5tlmgFAiEAnGm65aSW1HaVpvI3BpGKrrG3NCqJmxYl7ZSn1w8ZazE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.eea9b304.0_1619564006144_0.08645235460419931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","@material/mwc-tab-indicator":"0.21.0-canary.5dd85d0c.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.5dd85d0c.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BE3P67bG4wGtf/I+p1agrzBjAZ+diuHwKk5MElscIrASR0JIzUvLgxAKtFgpGj0z/dlDLXBuzluMnVNyqpZc9g==","shasum":"2bfe984848d2f46c7dc3e16528bebecab38549f6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfJCRA9TVsSAnZWagAAdT4QAIKCuZnOQBMDEjFXQ7wQ\nz6baERBvfegDqZ4kNSPqY31JGo3lJh9xDsCN+mTtoyfQVWbr5cZi+d3PY3Ie\nl9apa5zz6SImPM7Bt2C+K94VORFr8qpfEWVzqcXa6S64RV/ElDpiJdqGJuEe\ncm+T0vM5Tbjou6ONoMHTb6TW3/1V76+M0N5zAlUg6hyXf60NhzbnDCVhjkq1\n7mO1M7u6sPiDf8em91hFQFM0QYOUKunXUZfhUOs991rHMUodW0uLvoAwTUL4\nVmdy2afZKV9XkQEuYIsHJerhP8eqOFSpKDNsw9VHFNZXMPatpeDXQyZUPOAw\nuU10Z4DyTmmYUNd/B/2NVzVEBKlXuJg4eL4eKOWYnIxTV/F+TPngVt9lcIsX\n7sBdc8lzv2+d1QfOw6o1z+HW6BBVvqgKF9qNe8ENChKl6DEuqsZTATR+Ke7S\nFQXJ3V7g1/JBlWhLv7h7DfIq5wNPkpGxP+mAe7iHZjkdRLnLfyEDPKVdcdJN\nRrfI90oLhqe6vr93bpA6Q0VoUVQS0CgBiTyw9j/rxT6g++4pO7IwmoleeKpB\n//eew/Y+1HZeU52clQy0cK3+MMnM2g5ZliciXxuI5bZCWy+nI9DRAwry04tV\npGnGJBv5R6yOT/RMloqcCV34lwHfXFDUlNAmykm11tYc6wc9fNMHUlWhMQWV\noYj1\r\n=OtV+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4PCdI/jzfj499Hi0b+OOIoKRDFZMfRaHYwVzMVoA23AiEA1jdLXk0QUFVzxfOC+RDNFuJ3GTUf8TvROb+5DI/n08w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.5dd85d0c.0_1619568584921_0.21000367491929506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.cc813cff.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","@material/mwc-tab-indicator":"0.21.0-canary.cc813cff.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.cc813cff.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XFA9kpw/ZAcHunf7g4aSRY9ymjbd6XTvqKll2mRbyQHyZH72yCcN8uO5t+fEvETXcbAS01DSZ90U6s/iW5jmjQ==","shasum":"34d7bf879fc015d49f527f8f47b795e42b2c17d3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRmCRA9TVsSAnZWagAA0lIP/2QjFd8wb4r4S6Cl6hBO\nBGbFN7xUfFNDfmdrm+jVpxi7lUds/NNtUclHLSpbJkauO3xai6qXv2aF9A6y\nUrm/ZJOZgPla2HC8wt1nibmsV/Mhd2Zto7U9+f+3CNGSDJoWxwn+KtIWDbn/\niKNfns3YBLFaU/JWssP7bEWlwMk3L7PXY7O3F0EMdVH592WU6MLZm6PDyfhg\ni/62NKBOrDt2sm+bl/Wjhw9xV0ybi0eoZj39em+GTKwRN+IM/ONRSBGKlYsP\nITPosy6NXMuKdYM1d7gA9/NxQZ55HVsF5D9fgrz/g77etYfVQBg+9XS3V70a\npq0S1i3vKUxRBfVELEkWG0yZbalzhFPmTvkEhR3UHaP67+9W6jXJxpL7RcTY\ntmN34tnR/KEPhiizvFznYoWfqrL1YAEilXMavxQGqlqqM8QVCCrhofKtezbh\no6dqLJoaWRWvAX1TITVVO1jTGlOIghSMEyeOrzJ+RLtA1NKj1ri9qy33VvhA\nolNLR8dXVAqCx2gmhQHLkaRY0vmJQkrU+i+RUcRuWn/yyF5vhgospG94YtWq\naQDqIWHoX3uFdlHeIM7ACNjk7X2N8uzZmdQnX9cMUXUsSuPjudIq5NhW64ZL\n8qhPPQa0cWP2CktIi8cgSiuBVgz2GUfho4Mf6PvrxaX8a1uAEgU5v/KuhJKX\n3ELX\r\n=aife\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXXRtDRnRaVtllNXDtrbtgRS7efYJ3VbstlYhOk2psRAiEAirx2HauDi7wwrw/27ix6ZCMpq3MI61osG0BTsO7fNE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.cc813cff.0_1619817574332_0.9734944814017383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-tab","version":"0.21.0-canary.0875e898.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","@material/mwc-tab-indicator":"0.21.0-canary.0875e898.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.21.0-canary.0875e898.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Zh2pzvGMUGy6nb4rb2r1eKQKLHz45MMK567w2MvYCI+Bslz00VyWdOvQb/vmnXJjfsbwSRQwzqL24B+6ymgn4A==","shasum":"3df9d801931919a1bec668af3f3644707edad54a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZPCRA9TVsSAnZWagAAybMP/0xbz1WpVGkCRpR4B+pB\niJH2SByX90QakW0Kf+Vyd7TWALamSgAHSIFtN5wHwm2rBbqtfcvnAATt7eUg\ndlvj5Yt0prpCarrdNynfp+rzHNs8JpiyPleSvXB7aZpgVs1NWjX9vyXTyTWG\nHTxCitWSd3ihv3bqyfciZpdyaJxGtS6jh/+zy1yZLZQjAuEYZQe5gqswLm5z\nvkQ7TSC1FDDrxjqDG0U1GQNvzJd42UobAq+5cKgIdPsbkskU5oThhHZz7mFm\ntwOuZSb0t7pp48herPrHnmQTT5J3TsQ0mnTXGnOPs7kDQFjg23XzWwvbs36/\nwNTh6lgrn+T1tyqU3aS7ES2EoAECVf22rKjL2yAsAH8Cu5y/MzjtMHB1ddOE\nWzvD6S5jSGErWN6mkIH3C33lBN0WHrQEmNLIGc2a8F3uGIQRSUWhupWL5j2G\nx+1XeUjL0fis9rEuAzDJwBvWHOlRnNgslcobRKf372oh6GiK30oaeaE62DAP\n+H+d3rthuPVkKFh67STJNG87anQ08MVPvlQOf+LGz3Z9lxQeXnUdLZ0Fie4i\nnWZ0fXamFlfyYIDYUq6LxsHxA7mP2qtJdf2HApncf44T8WuK7zTA8d92r5/u\nHleWSHEiG1sAHGba8gHicWf44i6QOuOXQ0f4lZSkvtXEl9g5Vl10rnFlID4f\nuO9b\r\n=sEiH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD24qQqvdPh/uOrjzraqnFyOhwOJIW8nr/6hdY7hlMJRQIhAKN/9T6Uj1hSVw9y1YIrCKqtRowf/ZazASRUdeFHC38n"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.21.0-canary.0875e898.0_1619818063134_0.3157929871000482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-tab","version":"0.21.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-ripple":"^0.21.0","@material/mwc-tab-indicator":"^0.21.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.21.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-eE89BxK9gRpRuJbWU8W7mto8K2NMlCwl5oER3Y0Vdy/9ptj9sc/05UWpuiP+x2Gq7v3j7kIzXWhP5Gk3ld7LxQ==","shasum":"1201017f2e8967d3fd577238f5d055f6d4118681","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.21.0.tgz","fileCount":13,"unpackedSize":66097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmTCRA9TVsSAnZWagAAxnkQAIBH+gB8ravOV7BkBvBF\n2aYYWvJk/Zw6m6eaA1QR9nmMLs2FMfe4+Y0W6PkUQVdBT/eG+4oisHGkfx16\nnDgux6Ym5wwFiSgu8SW01rvhd2sHpLg2ILwpavACjaXfMsVazZknKoGPlcty\nxgEuN9TF9xJVPaWvVA1GU23qH/HO8D4eDX8ttHE3bBM0scvkvn3oxfCZUqpg\n1AqqN4bLI1S4wcAt/Beumm4JYJppWuLhbSVxa3LE9Jx+/0xGsOSRN30HJlBb\nBnWOe2XeqchVqG/v+ZvCUuuw6iKcOXRWL9ixZZn0ZRs95RYFzxggP8dl2ibv\nt/xuQOUZtJr8gXJ7ji+oCtpN/VcpEvVP5sPWpEuCVacIEaNWLckwOp7y+SWg\nWDzIBjhrEzQonZ5ZYDFuHzJwp42GY/sZDdIKOtWz8MHb6T1OhB1pHT2v11Ft\nLRXOHoxjrRXH+4mnNiq2Kx5G+C+R3FMSqJHvArXQWmlG478Iu60EJuML2obJ\n3agS08UdSGxS7lWNd9N3+BX6ZQ1/zHFwNZLqtxYI0f0DoBBzs/mAzMpxSOfa\nvGY5JmN0w0r52iDpEhQSDe2j/uCCoKSfGGZtl8ltRNTbQYuQ1GjX84HqMDBc\nNmVv9cBXH1l93oAcsqsmZ68rc1Owe4L33zOCiAzhZoFsRGVbAuWWh4+uqWz3\nG2hI\r\n=GTOE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtgr57EJGCVciN6z79vsGcIEoheLNg4N545mHFPmhHrAIgEAsEMT4bI//hb1jk8cHXN9TUs0FtHkz+SQlsJl2HpSc="}]},"_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-tab_0.21.0_1619827090750_0.6698985487086533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","@material/mwc-tab-indicator":"0.22.0-canary.8f1e7e1b.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.8f1e7e1b.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9sxehLs9bDOlxii3U26E/RDh48jHdpG7/jtkKAIn6jtTvrDSKxSSXp4bjLSgD4w7zQyZ+HlxKjEwiENC2kejIA==","shasum":"b8264bc4452f48b5f0fc7c1a47297dae47a64a9d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtMCRA9TVsSAnZWagAAdUAP/iORyyiWW+m1FW4RQhD0\nX8UTUKK1wSQVX3pCwybO62oNBM7PgPj4sNNawtlVkWPQHe6L9chiJHmiGCjY\nFft5Gs6U5KfLwVjh2qmO4mBxarlTTv0fPcR2m7FwwzX5AYalh0abBsTpH+YP\nDAV8aRWs66j46ZOSUBEfJHyg1RN7ra6BZHAKo6fvDGCRZIBZ6uoup7Jt9gXU\nrY1cErOUh5ImCv6jWh1QU4jXLJNKXk8RK0iN14J0UkIKnzx7aDQbCyt5D6Ks\n4hv5fmuBCcmKwLwk4o6rMfphwYTIAJO41cVlPTZ5WlduKDBSyKiKuQnceSgS\nlq/8F6pq01KBx7ZcL4dUg9HfO9WOBJ4vejpoj9gxiY2zwyezCitIMNwSuNp2\nFHD5caYD2yy6N6y/Xwx9C3eB3Qkpt5oHPMZCQtMNgQsv/0FhUA6xvWIgVVa0\ngbVx2gQJPouiXCWj4lZHHFUhT6K2NVGZljjnjYkmDVfNF0Ep9q7JKZVyGHh6\nbiAkUbFGhIOW1D+D00/BPT/+w0eW42IXHzKaDav8bwnh5ASdQrZB1nYjf80d\n5D17U5zqJtXhrnkqknHSET4lF7VQOLp7vKh24YKh/t0pVz6AC28hIq7opmUM\nXgoDjtkhYs9y76ADLHBcLemPTLcEMYnQlWnt8nX2/vvMFSrvWXC0RicyV/V2\npw9e\r\n=Utmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDutkRpQWOKZssaXFQuHb47fDKUuycfLbJnWnKubh6kTwIhAL6adyR3ybS/WT1od7Vvlk8gn82q4iSQu9cmJIHbWSKr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.8f1e7e1b.0_1619827531685_0.6534016513067902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.deb0e792.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","@material/mwc-tab-indicator":"0.22.0-canary.deb0e792.0","@material/tab":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.deb0e792.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RVk0I/sJReDqgrHJ6yRxmer9NeTuq/25z+9gMWSZUr8uswMlBaSq4RmtO5fZ25GsqQJ3Upyz15q38HvpQL7aMg==","shasum":"5a185f19aeac94f4e5352e8fd1588fdbc9b62233","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxkCRA9TVsSAnZWagAAimEP/jbBlQDwuiqar5kVlbE5\njoHrxorXWLC4l7mxh0IddKDgsAd4Kd1Kl7Kwdy1LG5MElxBJlLy7z9Fslwau\n9ov8daLFsf3/tywhKEwR5TbISvCsz4OIsv3RWgmPFF0Bksqb3nuOoG9qlaNi\nxmWamh+XT5GhPvSdCoPWBcXTTsLT989cJPqklVQSeNU7xdb+HVjEuNcZ+6hy\nw/N7GAtj+mb8JR2PxoL78mrKdeCgoDvMeO9qs/pWcY018xqZievM5BwQiGTF\nj+LUe/mMPmjhBOlxK9Q2J5muAJVHjNN9Tq8SDnCBS6xqvOYx9qixa3k14vJ0\n3LiZyrcovAaaxBklQSRLxwYciBiYj5N4brkHJuqQAIyL8LYqO6PPp5ezob40\nY8+hNe8NeknL1rU5Xa9Ghs7zEigc8qCgJ6411JRME8aJ5wlThLc6APKGxWA0\nCFgyNdrZlSFfzG3pDuVPxtA9vbr2nmLsXFI2b2JLateZmq/AVcFYEayY46a2\nUlpCOI1eblGZ5RkWnsIFNGKPhmbkB+z8CsldKSkeVNJ8ng7P5If3e8GZpvEJ\nUBpHCf8u/A5CqSp7lzCQkqY/Dyvebjzo6EhdXVAibf57+wsO/NLSCmsrzwue\n6AYcGQ2f1RU0gxslr/SXwkTJLG+FX/LHJkFljo/M8s0zr5sMq7opY4qZriSa\n3Nvs\r\n=tlXg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE39+D6V1eutvVtPZeKVK62BsoNno73sHYGjEwOQNHvQIhAJBZWZ27EpTx62s2HaMugICb0Fr56axy2+UmGqGP1V36"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.deb0e792.0_1620077668365_0.2857583805251862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.a3ff615f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","@material/mwc-tab-indicator":"0.22.0-canary.a3ff615f.0","@material/tab":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.a3ff615f.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W8UfQmnZKUCYMIlHoM+VZPCtbzpHdIB5u32us2ALzVj4DVWsd6XmiLFWMNANJWwmLdh9JcTmjPlfN+YpNJoY9g==","shasum":"804d1824ad7b4d65ae0881ae976e49be36db338a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpQCRA9TVsSAnZWagAAG6EP/3qMBLFnl6jqwUFV9Hhn\nb56C9uBXPZa6C/PjaTaqYM2JZXZ2zK/p4/WX6T2+ScUQdJp842OzUwfRSXdA\nvXdCQb+OCu454cZmRQUh3YLUVt06ERu0rMXEsZ5e2hEIuw1MLwAwdUasqCgw\nou2ilW3g+SSRqP8bGksPuPbEeZNh6C2Qyqp46Woa2EeihgEZrsn+oEx/RyHU\nd3dDLo7BYEU6+kP1va4+jRU+E6KBrkkm7L2w3s7LBEEO2vaZ20KSk7R6NH1o\nWvB5+U+J3diKJcGUEaTZIZhBBNDBRi1bV780l62zvf+CBlY7AW+MKfHY87mz\nCnzMqDHiWaz6EiFIgke3pOmwPkCQ0+zk3inH99HoClici8UL+dbnpsRCH6EZ\nfiuDoClD8yVolVVK5GLyY3LSuHhCryXPfDaSmchvC58L0ST+S4sz+9TWMc7I\nsJHAPpUsuuKahn36ryiIjY8r4j0aTFggPq9OaJxsh8EGbuzmjIARYdIWM8I6\nn4v3O07s/7WcCDcYz7HHGnKpef07sP1Br5djkuqE04EF/V3jehMJBvRs1oKe\nqIxo38chHT7/I4Y5yuMgJaecHaZa3lIuIu0jD4/FKvZXl37AM480pZGFZO7/\nzhNujzgzQf4bGFuQ5rPrvRaFGMgpCQJMFzSOI+7HrKqQtylJbsNHUvYOKxOG\ntp8B\r\n=BkiH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY7XMneuFWZ9YZtSenU0hnWUpz187SHJ2tDM0TnM7OiAIhANVnR6RzL8k52r1jhr0USSGahxD3lIi5AuijciCswzcC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.a3ff615f.0_1620081232328_0.40190427382037175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.948ccfb5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","@material/mwc-tab-indicator":"0.22.0-canary.948ccfb5.0","@material/tab":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.948ccfb5.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R0Q902ASszUF/L9cmGviCYCJSEjFrsKX74k/Vq14zj19b97IlBBbSnJ7ht3sTtvoQ88cEi/7BRTB4KocKzo+Gg==","shasum":"8523974901b87211d6697278a02b4968048c3c26","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEPCRA9TVsSAnZWagAAApQP/j6PHg6u2mXtnZ4WOPZc\nc4dvg7Q7FEsopqRRhMM7cjGzMvgal8oVuPNJi4ADdHcKaLB7yHG/TZr/rSOa\nnhGEMTFGsQSqdTT0Y2PYcDM0t5mUAYtquxJvG5fyXL43CDg9e+A3djXXsgEM\nVkoomEPwwCv3VLP4kMNk01lvRHUwZ22Jqfr0lpwpNP98DBNjs84UXf+NOsu+\n9rvUXxFUweVpA5Fgk4BG1bYZQT/kmKrQDmps7w+sf7vfIrY0bOz699cPWD8B\ngP2ucx2VpfqGEj315afR11rMQN2H7/jlZ/93qZc+Ai2oCpD3LDYKoRscB6BC\nWj6JeFNW1oV8zH+SdskuVpIdMO/P92LuQFFm22o514BKYZBRKBU7ikI8aB/r\n/pAnlgT49ieVzDYhX4HsYyHHF2PbYblPtFT80hhiluvIKurLhL8NzNTsmShU\nOIvjRDk4t7P0KWMgF+w8Tt1pJwUHpXpMlvjKwwM+ffIKQXSqZvjNWXdJMI41\nZby2dUsC9Sjp/L2ccsZoIGJSsYhiTcPRIH3PjCARnIDsHV0Y8BFBJg/XQHyK\nvcvy5eLwO8VyY5smL5Xr1o+Wwf/vF0RvYOHSBowYmYki3gSyEsqdARZ33A/A\n6cC8+fhy84tuB10dpXxtgWpQ/amIuayDorLdNGidy8Eu9nu11AMu2qdUowOy\nECfy\r\n=bM8L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ3WtDCywgYLFvpaw35geUzE6/MvslnSnZaXStqW6x7wIhAJro0VNjHHPKlfckK0dzwtjeB3S9r/fF6qhLba7r7QgM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.948ccfb5.0_1620087054694_0.4903104849668847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.9f8337d7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","@material/mwc-tab-indicator":"0.22.0-canary.9f8337d7.0","@material/tab":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.9f8337d7.0","@material/ripple":"=12.0.0-canary.be999eb08.0","@material/rtl":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UsmEAJS7v4RUaoJwa5EjNip4iHhf3APNNZ8dv1n7ZVW0W2Cyal0Df9zIRm/SZc0vk8wGMZGuOrZjnnJ6hIW/+w==","shasum":"c815f068dd06432942bec4d2de201009770dfd31","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRYCRA9TVsSAnZWagAArFMQAImtFtkwhed+zeX7Eg9j\nod1qyyg7YpIjy5zXW7+7WSnzf9xYyEhR+ZVxQ7OUSZyzbVmwEpTQk53G2RfF\n4ALQzXK6baFLXoP/ihtBWOflsWxxebbIcOz6k/6rjN2hqj2PgcEp2cNeCgSg\ng3OxvnLxeIHzYe9YwTPH9VtR1Jk/4O9hRD7NoLti4plSKCM1RrDsNC6VJbzU\n9U2BG4SLgf6Hmy7k0gVuD0qQs9zaqxoonZvgJvjeyRxmj7lthNqQx43pKy2q\neJ/ocS1sZLrNAIbBezKt1iatiN3xYkqzm6BroIqBZ6CY9uK9fiI7iJH+mF9T\nt6lfrAt2rdnTQAMr9W43nvAxyMBwNObtgZBKQ3OxgNP4/NGE2uLWOSVzkAVw\nz3OUwTqtMzBvExEIVaDR6Qli2AUnid9s8yPd3L9iHCJxJjS3dVV+aUfJSdV5\nK15euqL7J36nBMCE9ay9edAJFCZrO4YV8gM0iUb85Ri9hblV59VtWneuJ1/N\nhIGNvg6j7HRHp/RmqrkPeg98+lyEcPQkx7yjJL9g3TdwO/HILK+w65o87IYQ\nbPTz0ZfFW84Bc3mqfug4zS0xGCAIhewMrpAGcfDMT540UjvRPgCQzUMJlMNB\n0ejXGkLCwGrmDscXRjps953tyn+V1YEJq0cWpTCh3Fxs/BMmNak/LOeXjtF4\nMNDx\r\n=RN4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGsHks8KjeseivCyrbyzLRtGOQF0qNkJXlK2ZjYqP8UAiBWPoLoXaLt84kzFXNqCa+pllbbXKQt5X3s+J/O0KRNbg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.9f8337d7.0_1620153432069_0.6427563329100263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.5813480a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","@material/mwc-tab-indicator":"0.22.0-canary.5813480a.0","@material/tab":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.5813480a.0","@material/ripple":"=12.0.0-canary.055d4f10a.0","@material/rtl":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9YBoXxXh8larW7fHpOgCyjUPLnkhx6Xwdbd2DWQBzJMaq4aSzayUrCwU+eqilGDcYd7bZ4m5kjSY6WnHdRN1yw==","shasum":"abee1b83c06adb502dbbc5f81c504f2282574833","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMnCRA9TVsSAnZWagAARhIQAJW+H3oOo1DJtW0ZDomV\nc07yxzgbjXY5Yl1fIa8x9XdVeFasQhBZWaU8czgjZw++cX8im6H7FE5Sl/nF\noVf1NQKxY+BAAkmEm3IBefS4oRcuQjFBb4f1MUVMNN6Su4qYzbkjGj3RUux5\nPK+8ZaTJzwN3og6wWlq9+DgfE++mmIJ/mNcI/RpNo+ca8moXgzJkhgfDON90\nNI+TTHJvrAADHgD3ZEMRwwmtF20YJEl8RsB4EUwBjmR6Gyq/e+5Jwb4xbW+M\nNicbFcL8BckMOYU1wFhv9Vy2JxkGd/9IV+FyRshBvMwXgxwh0YY7ELd/x0Jz\nCPmz/b1L4KH4bE3isBz68PRzecX1kMohhpLycjbyKzU87B/lBI4Y/DNveGj/\n2nBgfqA2JgRljNJ5bYYbAc5lTL3S0KEHXc0YRRRAnQ6OT+nEovLUVONCxy0P\nSWzzBeITuoebci/Y6Ab0kB/YSunDV+fHJ0Hxdx43jGxxRNXgMlDVVPPO+DdQ\nXNu4NrjJph9xWfbevUCQCHsXER+7E7V49YLi7xZCn5adLD7ABsSk2gdwbcsP\nCIl1m8UXn4hHm9PIOzlM/eJsj42jD7LYMQ9EphAPTehj1+FMZyptwToYFugU\nlGwdYVYO4iTp4E25wti1CZVdB571v7NPV/WRCD05twrU4FE5i651UfFHYhVN\ndP6G\r\n=+7h8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYwwETnKC26VEgf9N2SI0dzEzQE3XiyktYH9c4qBq9oAiEAnqS93Rmtf7pYvxHfifVmGvER4d3BeVPuG7MB5N2drbI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.5813480a.0_1620239142769_0.3590024928977822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","@material/mwc-tab-indicator":"0.22.0-canary.ab7fc1bf.0","@material/tab":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.ab7fc1bf.0","@material/ripple":"=12.0.0-canary.03f525f9f.0","@material/rtl":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8m84RgU8U3opKE4dbuC/Ie8aFesCJKRW0jYqUm2z4vtps8Ocoditaql7ljeM8M3IOH81nM5Oo1FLvZeq7nUXHQ==","shasum":"c97c13a231f615ba9e41bb6432ebf383c2e33848","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":66183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6ICRA9TVsSAnZWagAAN0EP/RvRcAQuE2a1bEwDcbv/\nTZa142nlEJ5ITcq9FkJMLuR6pXBceWgihnMHMEiSKc5509YKqu20pO0G0Rxq\nLNiwz0v4eGNBQMKLDyhnWCxnWyo+SiJ+VpAR9c7lym341gZ1VRp+NgIS0AzT\nXFIFeM1/oizP7K8QubgehLiipXE2N3OP4tKq/Oa5HVSZ1juSNQOnt9jf8Mul\nfrSWnN+N29lka1++NxwJzOBaiaRTspD7NSCFCffnRrZnzcqCzyYFY85tHNXp\nXIkgKaZqm767gLjwnJS82OtWwMY7zXX03356ZOoiIle3I5wBSyDxPOzEf6gM\n6E+RH+zcTSKmd0ASCPGAuuSJZgsycjCZbdwDlSLe8EY1x9bGemWqvJmEzIlB\ntJ2X9t4HuKolXySLBt0sw1ZTg8vz08rKlk30WEHI5k4aQQa3M2ayfs5KD+a7\napbUlB39BVtr6jDwTyGDdS7hKP6iNf7D4bqKJXrtwxdFr8oXaPe+uhNTXDZE\nBNquCAEiMqD1Am3MBZAGawEGxeWTIegRaEFjXcLYYzl4Yz31hR4o+t2CpUUo\nFhpmIg0j8xHhGSfFhKIyggOO5hKKCabXbwiN/crjKvGACwLBVVmH3msV5hNS\nrPDHLceoLoRwiJUUpL/0ENg5QJYhBhVjl7RTwlY+BJGl0zGPxXyiSw4/3hhJ\nl42Z\r\n=nXaB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8qYKcHE9vMXSVuJxlkZma0S80kiLPHhHG6sKt+igA9AIgDri3KKYaZfIVa9BTtgvZp9U/NDKdstX76pH2kcBYkCk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.ab7fc1bf.0_1620323976087_0.4587391155459333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.25693d60.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","@material/mwc-tab-indicator":"0.22.0-canary.25693d60.0","@material/tab":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.25693d60.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hbRYTaIW/F3EXeVKxo+rLnd1f+3P/xcgF5DFS/+g7iZfkkbXjqSTLryfIcxBccFinlf7zycjG3N53ysLSZrwhQ==","shasum":"face3ce5512d9cc423b73a1286013c5a4dbaaf6c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":66181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbd/CRA9TVsSAnZWagAAjxAP/jTp8l+aeZK9voJU26AN\nhDTv4c+VDilbAEWgXJUhAKARutbU0CHhIa2ZX2mZw4Golc+hSeTK4X2vhlTt\nNoLoc0JN7dGqqepY/k/ejjW8LLkYU6MWAHXzfMN77zIuAEm4Jm5hgiKWUBVj\n9OwbpXQQ57ik4reylUCblNRPrQJ+FPHoczkSBsuE4iyJoEtSaKmUyQQYqsla\nu1H/prrtiQt8+nvjnZlcTp2Q/ztO2nNLSWuk8LuUALA01CXFX51nGIuzgj12\nBtozEmb9kVsrizN4mxGLl4u8EE/egls6euGNyJDPfunPbJwpMDivxFcG9QV2\nmnFq4HsFF8olEmgPY8UVxFTSHr834Yz+kHaePT1ayYN2HThQGb11vhEKmD4E\nkKxQFmOUonvy9LWAN7Kg1EclToubX7z13+MoRhZ/EIU039XFCsJQeUhAynHW\nH6flp+gQz0+e6MxP5XiT5pmvulQ88NxEhcilkPUYJa4p7lyBD4xGQ1hx143v\nhyvpGvT8mFlkUjs2zG+gnJyWDToMVpdZhAIh0I3iR20NXVnRTbyLqiULAtjf\nD6nY4QAVhgCXw5zXSXOJA8QRXaYB6RGEcK3MUub0T2jS2k/jgtKGO7tJL93p\n4vfTjJRKiqO6QbRmWpL3HWKSe3f8mKSXrY6ATWEbZJC/txG7Fns5kTxMrmvz\nvwrL\r\n=0e9l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsxKgQ1gnJCA3cciLs8be2EZEfqmbEcTOIM7ELf6//EgIhAIpDtp2MEHRTkHuSevVNIrjfE3DSRNiJxsn8PUmRRwzI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.25693d60.0_1620424575132_0.9322123926658006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.c497962b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","@material/mwc-tab-indicator":"0.22.0-canary.c497962b.0","@material/tab":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.c497962b.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6Enz/TGV0Cvhs/MzqJ0sEcVE4Bza8JvyimQtWApx29XlMAIxhAssDQY2wdJSNr7irmO222ekMu+gKH3QbnZYGQ==","shasum":"ca89a64efa0c4f8e1deae882daae3df8177547de","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":66181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0XCRA9TVsSAnZWagAAAL8P/Av0SZ/9NFb8bct7ngJi\nNXD9WsZJ7Fzx3gxMTz7X9E8nN7uoDpNc8qSozlpSYyBqnSQFntZlkr9pixPX\nLJxv2Txp/wMs7OGWasQcqc0etYJ/4SQs36uTCo5R1NImQugeaQdLljhNiL26\n7Jr+GbJVMpQ/AgV1C/T8uoPOK4IDoXZ0TUMl9dXYYcKBqEJHeUmbcwM+TaAl\nCvzJMqNzSYVgYxvGskooRfDkypiVabWLOS24SX/sHImqJJhub1eu9AgnbDGr\nyTtKSYvenMdyvhNkPkAKuF9Qz3YniZGKjSfxdKHA6fvX9iaBN3tx+3gS/N/T\nGlIOgPrVi0fr4lyn2YOK2B6YwM8+QpjOz7fchzgzie2On+29DjV8ezCc15kC\nMUFw3rS33LM0xNST6M9MLvzeW1HniNm0qHlO5ADiMMH8pYF2wtA8nDmLEN+h\nycOUsC5XZr0kaKfMTTYbR96NFLeBcqR7r0jrJgwmwdvNetyIydEu0Vau7iZ8\nAtuayI5YKNEvbEvR4wnN0I0K9TV92oLnwahV8vPyiWX5IcH+lVT5hRF+loGK\nz+20CpifgGwS1Ko29EqA/6//8ZrMcL5c+efs0a2AyFzi8N/osvQsz9VWL7x2\n5o73/YQOTKWA4wvci8GTfR2VtjEvsF72I2pTk02JzQcPPZFFj4vGv9SblgBD\nfn6M\r\n=hWd+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5053SaOATRn5pVflNr7dY/VjhW0TRw2KeLcjZkUJtEQIhAPpGpx7/gUKNJZnmECoZSHY4DeKU6znHMfWTgtI2bFsN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.c497962b.0_1620426007454_0.6273479389065635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.e300688e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","@material/mwc-tab-indicator":"0.22.0-canary.e300688e.0","@material/tab":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.e300688e.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5tEnaWz6XT2QzPjmYZohY5qm2z5c6LMPf6SVmug897HEA4KTaAd3GLouV3rP9hqHKCiHkE1nx4jhsz4x991FDQ==","shasum":"e5f36a969605d44c9d3c34e1cddce71911d1279d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":66181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4iCRA9TVsSAnZWagAARSkQAIlBtcYjSjSqtNw8FZuS\n9NZaviIXVqu9RoC9zvIazAEyPthrnExDOtah9u7+hI8y+MQAV9rzUUu94Gkw\ny4UmCZyvjI28Wk6q+JjEjSOL5yv3YDAy0DRnDPVQ2o2EdyRvL/XU1prK3Paq\naLHln1BL2UcCGJ1vqUI+42Id6foljktOzYGWWnN0CPQqQfdHEaHLZnqAI3Qa\npaPsCt16/+BUMLjVmx1Z2dR/1awFOgNBUyruCvArGEjmpCuZAbR8MGaKXegP\neJtfCVHSglJzuWPQRdErCo0cV9QqLI8DUOGqFw3z00KKaLpgUVpf7+olmvWR\n4cfGOeGqcfS+GiJLkuiPLg5ZPfQgsQ2hl0EL5+XUk+wvtZPPLMb9AvsG8MY/\nC1GBIHjIqbQJId/mc7jxzajWwUsQC+FzeD47Yx5qXA0vK17L5MC7jFclKGQo\nNgSsw0RJau4zJZoK+0DNEtbAM2ErMp++do/WBVBPjnuMCs+22BLAteOPQs6Y\n8a2oCzq8DmL1o8S1JsrqS3bn/XvZhVBB3G/cRHMfq7sgb7N28E6gK4gXW+P9\nTV0cDYhVqlhcQr4/ace6pwkcNqyCELcH6v9YIYc0gxP9YVPCdBmEWB6stj59\nuTXEUxW+734+kCDiGvzqQ+mjcPuVuuofRmMfz1yf6J+/2AU48KWp7/TYymjC\nPKtR\r\n=NXCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2RkIqoygo5i1rYSe+kfAUUd0MWUe/08c2eyuCu8ubtwIhAP4DKqvSnuQMkQoPn/+be5B4oRDV4UBhE0J0HgIwekkW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.e300688e.0_1620426274421_0.9959955127658686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.d70287f2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","@material/mwc-tab-indicator":"0.22.0-canary.d70287f2.0","@material/tab":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.d70287f2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WHzHWnPR4Rb4r1wZuVqg072tKAPmo+KrAd11n0cdDLQHE5ci/wouXmMB05Edmri6JcVP2RQC/DclouIqNBjYlw==","shasum":"bd491f604b4bdb8fe424475e82f6566321f29f86","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":66130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmaCRA9TVsSAnZWagAAEoMQAIxhB+Q1TeEcQzxcvaMU\nXhwT5sndqH+JXwunChEEa/Q/8cN57SLCKwGrTjx/erbIa/iVY3Lg/9G7lyWk\nHrHRosUsD+2DLzXz3Or/MA6/+akKxdVsqkIdBPPvboSlXP2l53TK4d+i1IL8\n0BOIUONJYBvTeipW1wJtQnddzn/QT+8dxuj5zsIO11XojaCA9cqt97WzV6MX\nbRrTQw4r19dVZoBONS95J263qFzYJ1Cmv7y4nWg/flgXz0JG4W49jIhDVRi3\n4vQ4AEWnCBNdSk7kD5Ubwk58c3r5whSVuCPgYR4/7CrvD8KzeqrYlamfcQK0\nuybDZMqLjs6gfnsovDUfFOijNf6TJG4/UPxIqAITG9bQol2/WYEreTBJzSvy\n6ZTJ9+y4l4XGttWIKIldpxQZWG3h8rMmhn311o1wT9k0WzRKpFUC4ad1+N7U\n0azsnYDxzbqxz7u7OCP23myfxPhMTkV0xIWavP7Kz9In5cAbsWCROr/rcpnb\nK4rorHNd2O40JrLCkMucFw+vv4wGvUMUIKnDg5o/C0uQTbXDk7BRFZMZMunf\n+JriF24zl0cSpnpWOQl/blkvB6c+VmrIN5cfNsnwBXzRQqwRxamh3SYgLGnt\n04S50N46/xTAIHIT7UXReidfUce1wv4OW13aKo6cWmOPpj/oynf6iGQfwPDe\nbFR5\r\n=3xbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBxXASbepqvuxJP+vAEC3jdsN2HZfCmnIPEtsTwqfQYAiBSwEMHTl/LmZA+TL0c6mJPWgofmgfIPVIW3wHgZ34miQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.d70287f2.0_1620674970327_0.8083123866944224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.02e841b2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","@material/mwc-tab-indicator":"0.22.0-canary.02e841b2.0","@material/tab":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.02e841b2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PjWrn2fONjESoNhBa6Sbys/eK9fFCqdsgrjY1z0qtN7bT7TBp5JF1KesfHz3P9uu/2FCL3JtOysyfWQhbJlM/g==","shasum":"76acf7e94f5e7be3e44efbd78b8a546990779572","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":66130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjnCRA9TVsSAnZWagAAJuUQAKN50nWuVsGE4A5h9lzp\nxmIhlqwQA1QAYSjChTdqJ9ZFE0D7wks9Vxs6eyhs7fABa1lC5mU342qXxoqN\nM372ozzrhRGUNQWzNVjrXjUTlYoABaQSkvC5Jj5hD9q1L5md+gQ9uxCbFoFq\nOsFOX+NHwEop3W5tYO/iClBXDr5GJNjIRCWk0I1cceq6nh7SuRZLhr1lHEhk\nxYkcYOOpcapZ1NQo/LKaic3pGN/EGxy6ViMsY3XIWBNZvKV7qecWgPxR3BQA\nphSjncF6Tp49foE6ay1HlunYyP1j2laoKJFESJ5IUB4LMAVhJlewbmasq7IC\n5HsBEdOyx+O1tsAIfLEhZVxn0x1FDh5pssk4Nra7ps0MteRhJD+6uhZ2TIzy\nsNvr+TIgZCtjsoH+OLKY0+JA3l4+1tCfa5oTZfof0pTdLhisuusz/guM6cew\nQfGNhlLEQHQHt7ESBBnYLRAMdDGpMZfcXWGCIvMxO+mV9lmpIn25ENw925gk\nvkITtnuYpECuNe70Lkr493JspGdrPFbPcT86RMcqMSOeUdYpDQEudfVj72fC\nBuUzH7Vvm535meP3ua6/Ow50h4ownd7/Sv3IQK2nMbBT2q7Ev77uTeIkRwPz\nFM0x9CBEF3FCNdR/2Hml9W8Ctkl8AUFjd93szKgPvNM1k13c5OrwAJaIDiDl\nsI8e\r\n=gZPU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6jZMRmBfLxl4GD+V2JKgS6T5HIsTnsMIgp/4BMj5HjQIhAPfwq70UHULf7AiCk458MHG/4SoYo8UKjzpljy68Afh6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.02e841b2.0_1620678887467_0.34412678636610816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.badda2f0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","@material/mwc-tab-indicator":"0.22.0-canary.badda2f0.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.badda2f0.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EpiijDb2Dw5dCzJ+4TI0ShDNC+Wen1mz65haryw8ojyZqcAyY08Bq6YaQkBCKzj94MgpasuVIDL1nx694WYPqA==","shasum":"ae1054ed1e0178fd817f2853e3c96fa799f6d88c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":66130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEqCRA9TVsSAnZWagAAc1cP/iNJrxIsSmJI1B75lpra\nyq1l5zzIs6K3ptyRFT8m0EZ5MGPHDZkI4o7jKewFVpVajTB1Bz4jJTuMlVJ1\n20LLJVteimXgbONaM5b3DoclJXMwWgMAhN3/E3fZmhW3TUqApGttqMR6QqWs\nPeo44y03wrW4xApJKMiRSpGxHEcQqg85vp0/1YhESLfTs+IFEJWaglVwovQY\nVQRuUdwIqY7q22lPAS6/D1eJ0In4w2oEPo5iVdCDEiXx3u1d5kbHPrzZ5QSx\nmX5a+WA47BbGiM+g4qjE7tkjn1tfw/8CwJ7KwIdY2XFc/2qluCCfYHMj6S/Y\n5bdLbb/qdvgZIFvp1oozKCkoB4PR0imB7z+N94ov/bPUI6P4OqYaBUzeZleT\nVEom5Dr2oLN0qtx4nKWXKuadBUAXYL1CeI+0DI+cmxkXXn3yXzhkO7oJL6t8\niOkmczmIClDmEDekXOSC6f6TOOiujeFTgnt4VRnJIgdhTIugT4R+nnKvJJxz\nIMl0Qgeto/GZ4nVqGz34BffQZpnJnloD0ZVwu/XzkZ8+4vGGRK9SISj8HSud\nhBiq/Bdj94Fi1H//67W6LjpVDNU3QgzrTWAZpdyYRUbz1SPktmMf+FcrBTUi\nk7GhYvDXaPan4E3i59W/DTnSszDQ5EA53WHbNc44p1kM9lMYxnE42EN7qxre\nvrdk\r\n=IQPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9zEWLvrAvP8zsSzXSM6x+GUKMgK+I5H/LLnJ3YIlzYAiEA2GELKd/fCNrZGIfSv3UIpiRhDYjq5VGWRFQcb6AAob0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.badda2f0.0_1620693290172_0.4630446953993368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.004aca62.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","@material/mwc-tab-indicator":"0.22.0-canary.004aca62.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.004aca62.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ySVcB2CdIRuJ4q8S0WEDMJqCFKppsExso+sGj26QF50DnVaVKc9qlq/vWzXE1b1UewMOh++TXS/MNMDKHYLNGg==","shasum":"0870a7a31fd6114fa5278a4fa1efa536e2a7ca3a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmserCRA9TVsSAnZWagAA64EP/jkgF4cA8TZcBHqpCAUF\njDBnK37JTgZUfq3X4PQH7KTTMJ4wY3vhLzVAGuz1EoIMrlgXnhLhitYhnq2r\nokisnmAidZ2ALwPbFAAdcmXGEekIHYXewPcFKheNI0spEnQ10Mfx4g50tx73\n7siB1HqzestXAg71A0E9fb3sua/G7hMNUqoZnxq258wOScENOuzctI2ZqeZU\naP4LhqMd21kyPOdVrJAWcjah9xhbiNtNejCcBYovGSjbvebU8R4G7KVheWV3\nh96OL/Z3oLpFkS2De7mC7ExUnpOeca2m0j1UZpAiswTSiQtVodU4LCvDFBqm\nSAi8jrKMQDfJJ7pjIffkaahicDGrquVi/WigXVGb7/rs06o+8J+kcdbvNn3A\n2LXBxchGpTl7SpyJiBWhOH2bkvk46QNz+eSXrQ7rWmbGYCitOVxojRH5dlkJ\n9eH3N+/AxDSLvzDzd/rpbpYteE6rX/HZqopvl8nYlMmRX7TjfVkprObsNM6p\nKKa48q/FUA0q6wwu3iMiea6EI+cPV/UPiIS+sEScO+6vCbTFtxZfgnQ8/xfY\nceL3Gmv381V1m4faFvTYJ9LYh7Hweeq7xF68cClzTKxrwaFV4Pzo6h9Nb0oB\njWsMV48bGwA8m31/DmvNsNdwytd7DZmtbrxon/22ZuCflAmmIw5lY9nIY+Yl\nqHIh\r\n=7N/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd/9yvp6cMMPg7eYzxnGvI+NZMoq0XqDLgRVTkWsfeWQIhAJuo7Mk092LAyKLJSMdyK4lfo3K4Cwj/GFQr3IxuLlLz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.004aca62.0_1620756394920_0.3172290253502923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.4af17446.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","@material/mwc-tab-indicator":"0.22.0-canary.4af17446.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.4af17446.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z6tBpD46RVaiEvQSw4tkP94d7DLscJMgCV8f1jclVH0tdgoZ/AOPfZdqpIJa8MOPpbdHOni7ntdWjpqp/eTS8w==","shasum":"c60bfd52196ce5df8f1b8984b2bae78cf613b3c7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtD/CRA9TVsSAnZWagAAQKIQAKUYGZATakIBezbUgNSJ\nT5xF6kAJKQdgn94/Xw3YpqD9otJVrnuvUWc3eCvzr75qnNsbrKUwqRKNxVQl\noGMiXNmshWMFFtfuNTTsyAxld5esXR9tRjVptliS+AAKR5Fk/jG646yDeRmb\nt5HAVtEuldfw1CZH6pMYMZkSGKnlYRDhSQOPkGfvn7ed/8Weh3ulvazgd0Hv\nEgjAcJPpNGPtAh9bx9OMmFNXgnIi0eMN7dCpx3cTzz1FMf0sYGmHxMkp57fR\nTkFygDJNVNPrb+Ptsyhh3JZFHt3AUaza0DWM9uC7xN8T+NVJjyljgwtQMRcS\nUnNAUt/r+mDHVNgcbj8tw494eOkF2w4X9dex/RYYEaHgLjHkv/ZFxuizGFCy\ndNYrtoX0fWm5/RiKUiTI4We4ypfZcy+ZCoxYZjLzMexhqgdTlXvqCMaRYKMc\n1KbDcK1wzUWcVOia9eM3dO45iQmZkfse6UXouGZ2nMhGPwR/MuMJqEre8Si8\n0cmghxFqubdhHwbl9F6AuOGDN2gvEi9pffq8hUFbynjEMCdyHnSitgIefXV9\nVI/IjUiJFXcGA9/3WK7e1o4vYz3FSOwjuoBrD6nglAARX0rpuaLEfSPTul0J\nMG0U0q/aU3OWDBlnnNEdV7n2pv1ZLdZLJ5vJCDPpbH+1mXwvEYcZtX7yhu2b\nOV3Y\r\n=H90z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT+3HB6e9SDDUjt30+bcLrTnFijI0Z2YCtBw+H80PTawIgU0qybCIVGH2t8krPQPKHhdGCUgqCpZEd/jU2Hi1o2CM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.4af17446.0_1620758782806_0.21789222305112643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b94d7187.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","@material/mwc-tab-indicator":"0.22.0-canary.b94d7187.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b94d7187.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eZVgIWRZQsodXq9seVW148O7I7knJ6bmzeH+J4TgkCylqM3MWGc+kSAW8AG7mo1eLxXml4WKVI3xTgNa6UFMSA==","shasum":"fe63436ac09e092cb63666760f2a4f0f0ad5fe35","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJLCRA9TVsSAnZWagAA49MQAJbmNGI4j1XD6xT0Phzx\nZ6rcpevXhuogpnLbFJDrnIlCcez6JIu4bEkFN0isUOsUi1kSqRgd4dgUTIDi\nQjSU6UimE/gT/Lt3TVqsLpYz0P495UYpMKYj3dw3IoCgLUzXl5RNgpveMXMX\nWI307o782CvgWyRAkQQK7JlOXQp3xVV88DcvOClmc5kOalrk/JQcglpLj5PO\n8CvLU1k87bdI9OtLXoBwtKXgNqRqaCHeKz8YvTAX4LUYeev36SnIlpUm6j7T\nXuRCd32QfTEzpo9zmTlP6rwaIf5jfjjC1bZ1Cu8GQCyU3t6aHC9lIMomr4eu\nWDEQHBxnkgB9JfmbpY58MnCIpCw4fQQ5RuVRcpInuqnNrpi7pRQ0nDvWjieG\nFa9hGnR+HGhGvhjDgiZ0avycIwcU1hKtDRpWcnJAcT52B3mCIQpUP9fyb4b8\nFx7bAOiLLYsrJB6PlRfPIgEPWTF6qZ2SrBk5IxNSUVpIzDchhKNv/0phpVce\nId9+nlKdskt0JZEOukwnmDq1RxWeoeNSSqPAhr1aZBUvqmkDROohdOe0g/av\nj0sLVRQnJACdYWejfWPumM8ShjbjJdzhH2BfmTQXy+6qzzbgIxba8vpoP0D2\nv5xlZxbl03QyXZo7tj0ZRjo+kgZhKuY0lkH9aKgCse3UbPp+kcApFfk3lWUL\nLVw1\r\n=4SH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIeMKEzesAsQgFQhj9BJC4+DWld44tLvFxVT6dWN7lbQIgbtXgap8nq8WRjHz7VXXZ68W4ZbG4HyTPH2tKsPRX19A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b94d7187.0_1620759115105_0.9198614249772414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.4021b2f9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","@material/mwc-tab-indicator":"0.22.0-canary.4021b2f9.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.4021b2f9.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DuGRLg8W6Og2LDMNG70Ksm+diUnac/UpdWSk3kL1iNyOZwcLdBq3EMkHQ8WP6r6+w+ryAZznKQ9yfpf1mviyuQ==","shasum":"87cf96a828e688e313ae978c43b8b40834a84872","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAUCRA9TVsSAnZWagAA1+UP/3ldB+MSoWqqf0+JUGLe\nAwnW0AZG1Okp+r4WDxFjElgoyxKC7AvugYGp9++JE+13FUJWwN/XSeBBvDoa\nQFN7/pSPmmo7+Yroy7MLncv/IS7cRA2Dn2KHzf9Yr9qAlCOhFTpGdRZeLJTt\nrklkrKJEBygGA4ZacRDYkL97u3cH4jW3JrpdbgEb7ESxAXXApcmmKE4onYab\ndfT5I+e6abcSaYC6NiLJgqn7Ujz9c5IYhrwuaLfqg8RU8fkh3J3yfsIyL23V\nprprOm3F8MR+lEDwNkJJWrloEsGaJMjYWk72ZNSGTIY5LFNPkvxOEhmih4Qh\n92q7kDVy09RsxPE1i/T2cPn+f0Kga4oBD2hKyrTZqUU7taQEjpB0OhMZQlqr\n+pF2/qZJEvij+yaLAGokkNlpkSKalcmcw0N5U6TTQjq3GsSJzBa2fbnA+scH\n5pFpV9//WNl7YTlELeE3N9pxamgtAT8IGrY5oHBbhydNhmAq7nozgl83rI4u\n/ClMpfGObC3Tfk0ToVW45UBc062PBRV3pbEidtrJwE7rbM5GJsMv3gEYqGo3\nSklNcBGzeMRkS2HM6C8tCRUcqAILnwJzDovISLpqJ/fEWZQVD01JhLvN3U1j\nDaOKCifrRCUL44LH+N5rYYM0KISoXDe+dkPTjGlMStxAU3En+zKFXLb+GlNP\nD4+u\r\n=AUku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoVR9DGO+llL3IwS9wouifyfFKF79kRlL31r9DZPIjXwIgFu5vtv4ooB8UZg1dI2n5AOAk5cZLlkcSWjOUJzPo3Hk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.4021b2f9.0_1620856852382_0.2500080701992182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.6a5956a3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","@material/mwc-tab-indicator":"0.22.0-canary.6a5956a3.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.6a5956a3.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6JkF0AZmq1Yo3D1e2m2qiRLqmiNTuHMJVJCmg0iIhEe1othcuuRlj3zHNaqUflO1Blj8UuweiB1JhYi2Aav0nw==","shasum":"8032657034ae825326ca77c958e6bd67372ae1de","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQBCRA9TVsSAnZWagAAnpIP/1SQa4TygMPZUTJDSqPc\n2spksasmySZkpM2OiFyQ3DEreRx5CcWCJnvIUDmA8u5ms72eiSpH1JHVVA3I\nekZlW/N8YoXRoQzCzmEUgTrvJUzabuCLHHK785NiYDtb6r6cKlce/bLD684F\nU9ijCb7OFAFObPgN1zSN2lI99n+u9ELNcMQAfrg099InQHWaP2cdQ04OE1vH\nWZt01ZtBXtyV8rWpCE3punHdbELLcSyMhcZAMOBQj/63HtiFADb2SZvavxTn\nIg9QEzqBAQ1KRU5hEWtcK1525ynJ919XGE5tEISjFHvJFvHJP1XG2vDnED8p\nDEe3Rt82KHTW0iTHcBBU+gv+uEaV2j1p2UqnPgWWLi7jfhO+ZnsGXUW4genn\nMfCzl1yEyLtYBRrtJm+WN00LS1MehPblcKETqA1uIpPKLS1kDTEXGH4P9dIA\ns+4kgJM1ppZKSOB0OEnVlqarRfP8lXTRxArW6IzuDDQ6Au8SSMTPyfgc17oP\ny34w/SMkh/1AvANHoZTRLmJEJWcGCyI6kTZoa0DGImo1cy4oJUF1sEM8BDK0\nd0lpoUSO0SENeUJdARgda9RMBoxuVVcrlJGuOJf1d0nTemuAG0Emn4HXRVbA\nPbbG62h29g1Lm4xafmbskwv5Up6JOuu3oEYkMan+uwc77RLPatvF1zB24ob/\nOPKD\r\n=3obM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDacxgVfq7OumuXoNGg1OkIi+k0ccICRBsb2aV/F6jwewIhALGnCtuKrUoMkCJdU0G/Ud1ekDLXr8+dqm9wrghGDR0B"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.6a5956a3.0_1620857857322_0.023616555168754383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","@material/mwc-tab-indicator":"0.22.0-canary.b6e8a74b.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b6e8a74b.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C4fZ6npcYcTZXR0I9FpzPiTdsCU8b68KvN6r+i0TNaKPUqlnFMebbJuonjvNhWTU3ZjOyJZjvJlOYTtpe8oOgw==","shasum":"b2d2bd0f95f10d50808411a958219b73377118fb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7LCRA9TVsSAnZWagAAvmMP/1MJ6Gp2DBkETykkmclv\nEaMTRpwavRl2avR7+XXEwjS+nikO8A5m4stneKFrOnc3p6XIH94zMhgQKLAF\nLSbybM9XLcgozQUKRBuqHxOJvNTUb3m3EAeRoJA+WR9Rc3he5gXSTBDanqH3\nF8gQUMp1wIsTj/tpP4uEZ1X2L1xxbkibkM6XiJZs9n8rKVoaI/SZ3JfvwpiM\nGzhoJgLMR7tpayAGQb3oeTlg/E0tYUDlWZpUzxTOxmE8vPIRgsPNVZll3vDS\n/IPM1hPR+FMWGgJsFA/kY9Swve/e9y+jNcloUq/xVOQxuupWxRvpKC8yetLI\njcBvrKGaqzPYovDTNxLjKDL3xIu7aCytkP43u75ArBzKgJu9i41+TmsjM0eJ\n0Ygk7ltfwzv/0MVQ3ctSldNheV4jJrOYfjlzuUK5nuM8slt4V8XpE6s0bOgq\nQtAyg5WkNopaA95PBk/COSdK5wc6W1vFdRcBXbyw6MbEw3eAWgZ0taUSAyPP\nChQSvopSrbD7hpov3vy/wASlAUzpsrgVOtiztlDiGwf+q7E4sJM9g9Dxboeq\nkFnuEjGqC82R/mVRAxGPkpttBX7ead/bjwZWv1rOx+9Twye1mEmXBsAQ/HjO\nwYunt2DXDETBLIudRRSjApsVsvuc1zo1nHNCT8wQv6ZzGi9Er8EucWpvd0AS\nMDVq\r\n=saRm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0pxwySi6ChK9SiszHO+sQK2pXieeELs9/yjC992VtDQIhAIAbZilqvio5y7l/7fy4nqmhS2N+sNmOlaMOSLcaRnfi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b6e8a74b.0_1620860619029_0.30348650310304803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.c94e1030.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","@material/mwc-tab-indicator":"0.22.0-canary.c94e1030.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.c94e1030.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XCGEp+0WM6JrKDTQVlqjOLdJQv6UxfcAf2SSBUr0m5XD6xgg3vP6SMpwfBwFhNEA4lpXqQdJRMf5DPwpU7rgkg==","shasum":"d6a0f16493d5c301e6c4122c5011dee153f34b5d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAoCRA9TVsSAnZWagAAcVgQAJh/y8yGc794nzUuIk3z\nywsNYdrg/xCYItidGc6nn7umOpnwD8Oy1WW6DdJXj7HImu9HMZ/Gw5vGCnS5\nQZY3DRR0gFSeO9lCnTx0EuZ8Zf6CGqfzZtNrtEC0Dq8osWOf3Os7JQslH7Wm\n0fS/0ahPkcROXSqowiWXBBemISVpRatKTTVg3nFipiUoE4o2a4mgdHPpWkWz\n87UZQbukJKKqzov+sAJimHuaBH5OBtn55sJMTPVJhPUsNxwxT2BifO8FwLQd\niFp8pBiWD3QKGVeBTueeulY2F+guHYAQT/wQS9G4SMj/yjxzDvKVQM2JHtUs\nDlnwiNx1VZoL8sB8Y5ba0YmyFOepKus24Q+aa6qsiU9JfXyN+0+rpJwKs5Mi\n08mb4c5uTutVgzEc9JcZM/ZsYiAouz1AbFGMPrNJV3fC3P5y3RYvX+x9s3UT\nYpk6UJl2VpygJwThjYZoSsMrkPOpEKLNqUhWFHxU75qwSm78RWPalvNLXw3m\nklfN8hZrW/AAXgF87werP5IS0QjBfOp5KPx0LTXhya4WsiQAq/u1iitHxjQq\nMu+AEdmPh00i/lQhje87iiesJIInw7Rlw9iiG+iX2hF5dwXbwEf8Y7zJdyyk\nn0TEZU5oMG330QnvgQmeNMjtoNgFDH0LiIyW/GcFxGbYHvNJDgPiSc3x5MSf\ng8qr\r\n=ipf4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuSI6Ec/0PNbzwChWqPhyG4LH0ziMKAWGLESOMDWypjQIhAKtwtcIL0nzFCekk8S4CTSL4UBkuxx+4Uq5Ae8ORpnwy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.c94e1030.0_1620860967830_0.3896605606909931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.40a34e35.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","@material/mwc-tab-indicator":"0.22.0-canary.40a34e35.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.40a34e35.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OoXtxBgSVIKcIf0Zf2d81WOTGhucMhm8LL2UbdeztPKV/sZbNlcgsSguEaqgVI6wUFw5Vwnj55KJP1RgsRj9Qg==","shasum":"2418e9350f15be5fa0b41dc9ae1af716aea1d1c2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuvCRA9TVsSAnZWagAAG5QP/RhF8SBNHfgQkfnIsqxe\natNtxin9EsXX8cl5U4V6rJOHhlmVJVskonyGJuYkL1bgjUZ7n+HDIjcFoyu9\nPkThCKbjA5OH7RlqJeiJQT5eL/4oYUMei68YHoBQqZmGLZ7iy6U6of8Syqt/\ng/CeGp78DIm0+v+AWvVlG31X6I9wr8soesdR9zSxXUnyDx3xF26Q0/m5oQE/\nERJzRdkBRiPGI0freyX/ejUcXsIGIbXg5VoDd9QLkyTTAayOdvMe2DoW3cOO\nMxAlNmnjKCbgXk8x8qH0m6yu8v2nHJBmtVecIiJtq8VK21AsIsbEhC3NjU4T\nPgF0v6sCvY4uZpPVg6jYEFnRkeAvKGtN3/u8cw5rtfN5PBMb6R33TSD5nvYf\nL0J65siUMt4PKzL8l8WnZtxy/dWagWCB4LPSSWYZSZIiYzbALe+7u3G5xo5C\njSbmZgONXtBJobS8hI0QFe6FJyeGJicbt4uamUYkc7KghVAT6Oo5c9YudiqO\njGoAHKvTz9zPjchJIwjfLG69E9/uxX0sirbAQCqdQnSPJa8vYFM2FB5kp79E\nxUgowc5o6IivMA3scSR0J6sv7McyRwPdgHMTmCoLRR8KUA4OqiA0DwWwOG81\nAS6gVgkefZzuwjdyvXzDwUDCHG9bMteNP3wK85K1Vtil3o3VLSZVWUsQdWDB\nh8bJ\r\n=UQk8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc7NvC1tyjQx6ExxJb0uquQR6odv+B3QOWlugVSM6i3AiBVtpGeAC+KuNrR9neP8EN01s43uBeJGG8Z59Ck4mWSNw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.40a34e35.0_1620863918845_0.20567320684000423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.1be14d2c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","@material/mwc-tab-indicator":"0.22.0-canary.1be14d2c.0","@material/tab":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.1be14d2c.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DJzSLFbuLZ6f7Bs7hWCzqkVxfkvO8vfW9WEvcdDHK1rKNM7MZMgs6UEBdYr95yrND7N362MOFoHeixyDreW+nA==","shasum":"0a27d1e49ecac2e2a0db208a524e1dc3e0472f49","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbRCRA9TVsSAnZWagAAEdMP/i4Zsp1GfFaJEvudpBZV\nolD+QoyemN4erXKOSlKBO9nvh3ZsyAh2zmjokm5GaFhT9vwPUuRwbxHlknVP\n4/VGHZH70sRzXuY0jIg/nF3GdZJPpOrMeibr+GdTDF6qcfd3agDtQwH8MJXG\nYxHC3X3Untzya5flKePRxX2+2S+Bha9BErKL14XnI5DgiB/WaRBmWIg5R133\nCMsUPBeuaFq+KswCPvAq/jva7AkN1OEuxQFGkfrRCh6qw5kf4Z42jUOq5/Dz\nkE+l6fiR5Kg8tqPLH+3Q66p+uX5IkiS0lljUmITgcAe6x9RFiExxfVbcW4bS\nQRRWuLop6/DpqW9NySHsHjzZoQwXPXTWiUcH1FMbeNGhSAYUEBZPlPiP16UW\nI5sxrpUynL8G9jpBEZ6r0HWGxnakN++sD9Egd13kJEbCmZPiNazOAtHv4iCG\nQDmxKShTdkizyFry4v1cnFPXUIS9OjaADFqXi4+WTdHIBRxSZksJuI8aJ90q\nGz1Eu1pBemJFsYOQiw28eqN6pfL0Nl09wPpd9GdxkV5Yyaf8puKauz9lbZCa\nPK+WtIkkDE4ocRbvizNJr9s3TTFowIJ4w7SSfJN18fk4cGG1D8X8ewzoLzrg\n+CpcZBYOYc+xlLLwyFQCW58k13rapAwjKkYv3y/Dr2hRz7g2uZ7zuxMcxzTa\nKHEM\r\n=CgbQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCW9AsLxCOIyp9uCzDRRRRQ2n4/qtUvTEzQynXIoQ6ttAIgNSVsgSZtz4aR66JTaWPrR12BE0XqiQm1EJF12wpdzlY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.1be14d2c.0_1620928209170_0.6209388013628225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.87dbd64f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","@material/mwc-tab-indicator":"0.22.0-canary.87dbd64f.0","@material/tab":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.87dbd64f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XlBR+7xqB98PohB4sOKPRju8b+LVDbNV571VMQMV76oNXh9wm6PCj2yVaGlEcfN98IHRxhvKKsWPtRw+N8RFFw==","shasum":"09ab762e532aedd67b66fb6ee1688c2505384917","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":66030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSDCRA9TVsSAnZWagAAuAsP/A264WtXJ2IjVHVfYoRM\n87w4DWqSn7+BOa7vART7d21f/XWfKyYf8PdF1e7NkiTYQf22sbqllsCmqoZP\nv64+mUDF0G5J26XQeo+V5l/H22p7AULkAdY6kl6go8mv3Qc+kpSVTp3KcDGw\ne+hSzhXW7L63hwrhtrEmCVAND5DC6ertcUtp5FO57KZNuy7h+nJ/4t1NpfCP\nq5btNu/9lc1frbsJUd4YNaLzo2aSlJHGWwDtRJdNSs9wrdTFx96cfF8VA2S3\nbf0AeHH2uqvQT8FskSLGQ2EPyfn0y0gX2Mldhl/2kPy1N9nTrSm2fOPkpGd6\nzypVsEFeXJMaQWrAhlOSeabmclHvExbJGtWN+vw5yKVrQeEKElk1GBbDu3bC\nZlRWan+kDbcqtAV1tz+2qS4kMGxOlQeVPE6a/pRHd48dlAJxWkhKcc7x8KcM\n7he41iTt1OtKDEJTIxNpRay6DlQsEpQvPrcUkGCJxnmflaoVvJ+0u8K3pMgp\nQd0Q20ZKL/5Hy02sIekf7HqF/JdPtZxYb2Nm3hfrcM6lsDuHNnA9NqDNIG+c\nSgjYjzVzfTPnIy4WhzNp0AQLDzp4/SJybTmp5qjNVqP/yDCc9y+xyOE7NyXn\nVJG+XzXUm3yXjjCXyvJ+v5yUQ997JfhwstTn2DgKxqwh31KiBEsai+MgJI3C\nVQqr\r\n=ah/1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnCQ/BqU6jTRM2JGP28I58143ZeUo0L/sJlGrE9TviLQIgB/lUjBCQforNA/Fz2AJvLlHPZQMHcMM3ru6LxCYMMZU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.87dbd64f.0_1621025922518_0.8838433938928569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.c452e4da.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","@material/mwc-tab-indicator":"0.22.0-canary.c452e4da.0","@material/tab":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.c452e4da.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eKEEMJUAiCqyEGcl3RFB699nycK656B4AP0p5sWDF8Y0HQnEQBXz//o3m/c4HjyDIXEhmV5jZaZ3JjexViAceA==","shasum":"da793db2a5badc533eefe64e04df2b02420875ed","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":80167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0CCRA9TVsSAnZWagAANkoP/3/dZUC+iy7NLQ/Eob9O\nm/A8Fo/SIsppsXQR/ozoYEa0ddWTvnBpIZ4yCBp/7LYj5BtgP+YX70HxVE7Y\nUWPiydy7wJgD6bHCgZT5Wohfy7vlRO4DcrVRq4w2F1rCvlgQy6guo0zGAej8\nqPpy9nXSFdrMGr/UYHm+uPpUaRgjTbPiGg8S0EoYBxsofOq7+MhIzep/0r5u\n2g3hXm04IwWt0yeFlty9GyO72FKQpzbwrdF3ok4XRbcOoskE7eEDMu/kzVrG\njwQFuCAE4mrdV5345jTISEdQAAn37FdW3ogj2QOycAijVf3vbV8ZJLXj5Ipr\nGO82DSuTbUq2gHHbqvH9xvgFLCvXaRG63C4/vbNxh8AbDRTSH5T5Lj1ui5cI\n37zgH5HkX5kDUzJbv9wZERIzyQZKo/Q4Hq1i/l1XWp4UhqTgb+XguuVPYdXO\nwfJovfdt79deN6kAkGMQ5lsY4V1/NzdWoLsx574X1f0iSt6SP9LLC0sE3aq2\nzJ9oSOPmJWvu7ZRFogFPrkpet5T8FgIeY15PjC2cms6BTiEaJCjJUcCZ2DCv\nA2pt/TLX09vdgQQZgw0aFb1oOQTaftxjcpvNj5fVubnJcCyqgDwE1dEl0mZs\nuKiD+RS6L6g1sSQFOYb7gxqxV6J/ZHbUKee3Dn6TMjR+XPpNE9iVuV8QyIY0\nAdGa\r\n=BcSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5XBldgjeimcLRdlIxf0kdkvJvnQeEsWMlHkfCjCQihAiBbqCNiJJP7VnPyUlQjISnqA7GQFrc0zkZQzRju7YTBzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.c452e4da.0_1621294337701_0.7606761073443311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.2212691a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","@material/mwc-tab-indicator":"0.22.0-canary.2212691a.0","@material/tab":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.2212691a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N0SeWvhjJc/66JPlN6WQBYipcgMgaqbIhFxZhY9hotPqztfHVf2T93qDInF6M9CZEI5ncBFPSSc6JzoD+BzD5g==","shasum":"e4cca4faee7e6d33c952d288f3ce83f7fa10cf97","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":77109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHXCRA9TVsSAnZWagAAA6YP/j0jcBpga9D2QEHkvTry\nyCYOufqhwWkdk2Qng0vy4bCFpf1MKqrQnkHC6u75UvOtVmhzXoE/8cabfbIK\nb0aGxbwSKxmwctz63e2VeFwGoF7jKTfDE8zWXDaR3mu9NzcGsZAB0ECbwlGg\n1L9W4xx+3hCX/TUz1NAxo16MYpdfP6/o/eEmKjp4KexoFpMqtrk52m4NRZ1g\nYOeTETL/do9FXhuGfL+SVVb63fszKX5tFZMgymup6jbPTEdnpZBXQ7xnTSd/\nc4XEenXr5HIwlL3Gxer0Cd0nbZqUv8qvhF1oVw0IOT/IWTLaqayj/0aHomNK\nFdPAzjpp1t+fngJlCKNE75uDa1kc5OGClj8dsDNg5CZGjHPfdHHa7hCadhZq\n3sj4uZr/47g1gEwJFYx4CgdSDyuuVLCXoON7GmLo5zQ+Arjo/f1Cxi4Ku4gP\nZvURVpvgjipXSTKaxSL65HXl42tvoMdHn6ZL6ZVEmjkE3hdoOunJy51gaVQX\nlzDxeO6ve2gXJwKRmTkt2Ocny1gtnRCkXCQASeHpubVgwG0zISHqMtJpNNkM\nXX7/j7yPJDccnjGpFV0otAsx2gYsalwLBB1raWgOxPu/O+Qoe2oznBe/Zbsa\nGc7RBCbbrwaU53AfwIdPNz6uRvWiBXozMhvtrKx8qbLvcF0AV+ut0Fr7QmXW\nAi2T\r\n=NfoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj3r1kgD4km9ZNRjiEXUEwFUZSz2v9bo2kfeQSRXW1FAIhAMBtLZeiz/J2dArGeF8Vg961TuHrw7KzQ8G1nDMIdqU+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.2212691a.0_1621295575162_0.7677434594815098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.f748ff2f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","@material/mwc-tab-indicator":"0.22.0-canary.f748ff2f.0","@material/tab":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.f748ff2f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S/IGuvXnabdq2y/52V5iVEG578asW8DG2xe3esZEGEmM7hksYyk+ugrexqiL8FHlgi4Y5zVxB1kk6mW+CaUA6Q==","shasum":"09e3c9ea2a69b0515ce10a0d15161b953050a7a9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":77113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjXCRA9TVsSAnZWagAAHp4P/3Oa1W8JKygdSVS2LdUD\n1y6AocAPzF1Wv37LizbjBYBzUI1Zx8psUCBZp9k89h0JAw+N4LqjAzQtSeQF\nPGjdMu0XHlXJ7og1YxhyMpb2bra+2SMOtAdcybgkXV0gHSbSPMg8BZjH7BdP\nC6+N9Xqw6NrIloK8640azuYkwDvDgz/FFVbyH7wdYuVYIMyJP28BUYOJ/J8Z\nRYJPcYCmxeZ7ZWtJ0YLvDwI+WSpEVGKxLxWHyuUKTYkt28BjArAzqAFN3QNK\naAQhZxUWwJmB6ZQ9DUiOvC1SI8sjr+9jZP2Hfn57mRxayEFDALwBANK0R6dw\nLNwHUmQuUomH5DuD4c6cmkH2VMeS0a/5u0geodsPc7vDszVen4iJVoiE8dql\nlKMd/LoghKouTRNsR/IA5rlzu2ADt3aFr3MnyiGzFDg0/yUZfNnon6v859Kq\nuatS2v3ccAg+6zhO8emk8Sz6ryMRPkDIX2N5iHtB4fC5xGpIxvR237ZmPYyH\nZFGNrhcsIDeo5i7xlufygBb0ZqRwVtLq+GWi6sdrUA5KPG11a9cW7EowvaU8\nb/k0XkDuJD5FJg+7mE+CRuCeUyVQBzStyEawnCyvrX0C7NXfKydRmiAz7/RQ\nD6wFobhDLW5IIAwVLIeL4NtnRiG3lBWnr9pGmqrTJHtBw4cyLzvdpLmr68br\n+sms\r\n=ulyU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmEyENOkldXNNRLQiI0erredtx0xTFIg3mXG9g7Rd1dAiEAliRCOVzntM4mElgOT0eBfH52CM0UR5lJEQ6zPtKYfJQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.f748ff2f.0_1621297367085_0.9923380079317876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.cc04657a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","@material/mwc-tab-indicator":"0.22.0-canary.cc04657a.0","@material/tab":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.cc04657a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G3i5bCIqoz1yivFNdNcQMvbGX4B2X99Ayt+VbOpr0Mo3xGDqxZ1FXIEK6bLBcfLPO92kgaWlSyzMFkVS4Z/xxw==","shasum":"8d4491f55758f5ac4cbabc18c3f4f0de26fd687b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaICRA9TVsSAnZWagAAp8QP/3taf25UU4nlJRKK9jjO\nWn0NMABdr13SuFos+6d+c98+sifNlTwGVYnOhmQc2osSjdF8I1tk6boaiXVV\nBWUZqO+fv8WNP8QieN25oi3vB7NFQHHefMlxUegkwHiB/yIWnPE6tYagtqGX\ncrpwy+h0frZhgYKGZduWqvTmwiH2DtBfYJxWeH3WntPii72MRI+ypXt8IkS/\nN52uvbgj5JWreYR2bklb1bgi5/vAcY6yMrQeeiijoIKae8rx7u/Jrmbr/zdY\nyRvcCCRx9odQdaPl+zN9onyldaywFmSUHtYCzSZlSDD4RCNjI+6UbkYvxYR3\n8H/pA0XftlOgqVbYR7f5+QQyN6usc/eZZDvUFqtd4CdGg2o/imAZXeSCsAHz\nX8rLms7B6ATPjwIB0Gbjo0nzExgoJa2AroO/Cb7aWPMjptqzc7Fa47HXSeI3\nfS1nTDVZ5yrSJzB0tj7y8QtHV+zqM5ZSb9P4KepfE9nzQfAqrHxLooRkXk0b\nswDbCdEwknuMr6GK+I9AwSDVdbpw9Q9N7M02OuAhO7aS263udcvjdye/85D3\ntSo8epSwBCS8w9jpLLG93Vc5GnUGPL/TTbAifxMEwwWfVy791r43Ml3i2UyR\n4EYG5IPjE4a2BoGc3WC+fXACxYjaUqOHZDx3W79DuA66REb3iW82i/f2+Tau\nV3bc\r\n=uCMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv3eK2KZ06PWQ8rfT6vWkY3rvWHfvRXzra7IBDcOCLTAIgH7t66Btrziu4oY7CVrNLNXRsXJB+ZAePPGi/YJCqe88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.cc04657a.0_1621300872401_0.6643198043020877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.3a3114fa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","@material/mwc-tab-indicator":"0.22.0-canary.3a3114fa.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.3a3114fa.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JSxX517U9r+uFGL+7J3W8BHvXuFKcgjNSs9Owt0XaEGTBgyI/INgWhsBr0U6ATpjydhuzZoY0lpQrzL98osF6g==","shasum":"e6d5b46e11815f92d69c695c6eba4c0f18421749","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHuCRA9TVsSAnZWagAAKnMP/0ODRGvUOVAnRdqwNH5L\npQ/8f1pJHQoPYX/aod43Z/HHxSYRfcMKRUS0SAb4ZXiu3t3i8vBIc5cq893T\nBHDkE2Z5PLV60jGFZtRzj0ovu5GEI2VtjF0ytHRTz6AU3SdmKv7xDbJjlxsw\nXuHL263MKOIWcp9/IAhvBeyjbmaqCa/OfKDT1/RkuI8y0PNteb5m5m2JaOEL\n9Wvf1cJWKRoTlfBzC3hdJJnVhuNhzoPYTf79Ga1RkUCPzmre+DZunbEHeVAg\nP83ybQr32qtgiPpt8JHQBAVSkfVMXhJHG+h9QPIC/hXQ9P7P40xuQC8qhwAL\nmD6A6mGtEVuX2jIQzfTa39cx6IIch6yGHmwPG9ZR/PSEGQiCSTkHs1uYTmYy\nrtww8Qrw6C4kbr+BBFDZul7HVI81i5kJ+L7/gGUTpC03kowFSgoG38B+n/XA\njTxLOShAxtnxMfNsKha/15TZ38vWR7PRQogts/SK9RDZWbPzDBZxN9lZpoWF\nV2KZd8SBS4g6PfLqIqAmgFC7NvGCB7VDmEgT+qG7LorLx4EMhgOiIFIhzdJL\nlMqrUQi5dTgnXf9sOVqpQVkRSgnjHrhUC/+/KIz2gGOpMSq6tDP1Zrh5oWzu\n8Q17Yf/cm9U6ShgY+CMvAhD1eJykLdxgvjjmIjXBYRAMFtlfCBNgQLLykpwA\nyDxE\r\n=3Upj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPr2gSSVQgH6DQIg1TdmVyuOyaRDaR59dwN14+m9fyFAiB2xZ4sZWntrbspp3/8s8YPYitSjeJZxq0qAcW0GY7o5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.3a3114fa.0_1621467630367_0.8908215183940351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b46bdf83.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","@material/mwc-tab-indicator":"0.22.0-canary.b46bdf83.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b46bdf83.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5l9rFzvR+TXojxFF4w2kTgLKc+RMQPoeCwcjtTsNG9I/ES8da9YVbFX7vXbfR9YL/wJqgSdTeX0UYLuQpJoQjw==","shasum":"d41294cff559a4b722930c9aba19413cf69ad72d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCVCRA9TVsSAnZWagAAj2cP/11kH/wjN2tg/0a7sewm\nUQ1He3j0EApfH7/QZCzWDQRxBzOuvnnhFDZXuuVkeMJYRk9DKIC63Vg8bgf1\nb3/T9ru/2ZIKJC3OrcSmvO7YohyzQ8uc62Q3dng0EX+xlWTtikpux1YzTZvp\ndoKfBs0gRYE/KC1dXB6K9ub55gYMhWct9V+jLy0STZSx0TwHuMhsXbzchypD\n4iiqaMyad+MomIuEasbZF641ZqMyQf7tJQGD1NqoL55bOQo8YraTflYi7/LV\nCuGJDFvdH9uu7J/K5aKXpTJuLGTuieRHrOTFajzgQx5XtCqgoYo0VCp87BPd\nz/SuGwbTen7Gp6fuf6bg0Xo0E35XEc/LQa7iLkKzYPLnswuwt6J1WKaGeKWr\nYOPzYPPx60M3N/j3QGTs+ZOH5DONzx2xFN428QNulmthGstJbuPmF6+8880z\ngpYiKO/I7F95bdVOgGuMelF7MRc+i2TnSPYjUZX+nZofpX4/9pkfwUzBCNth\ndMZexcdjAe7zB4E0Ff2Liu+neE/89QLNPtBzWO5R3cdDk0O1Gs7Teo7FR+zW\nQSwT0flcgiW2jKKKdRNly670xT3hFmUkLyZo++Byygxr7YyfwerFMnDT3iMX\np575/g82dVBy7natY2Ozy2r4J/HvCQ1D2ajBx5bLRe3kVvVMzhPTRKkBn6Pl\nhf9y\r\n=BI3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0LFfaC3sgaiVsSD0JaD6hqffmKCDeWS5BR7v2uo6/iAiBDAckOZCQGAoPB7hK9sJUdfM1GISyZ0SLacZau+2ZLZQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b46bdf83.0_1621475477188_0.7737256245903037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b401a081.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","@material/mwc-tab-indicator":"0.22.0-canary.b401a081.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b401a081.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jt7il8kIHcdZf+zJ9Mgyv+KLBt7+LpueHhE6PV9VeLmZku5aBIHgXZAaTdIQJKognRUV36bd9CR7d6jpf4/1AA==","shasum":"e0f39720546cfa1dd817daef3f7b6346717b1389","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDlCRA9TVsSAnZWagAAPQIQAI6eeZSZ+3sjoAMHs7xQ\nF8msxZ1aCUiQ8GEeyNTnvX4UOU4QOWJSHBlB0dqH9W1xpNOt5D0cCL051YJC\n6g2ST0OtIArGdDSzUMGLEtyUTimg6SJmCGxAKDMjJGk5FugAm8DtuNh8kxcT\n/geDW5roWozCnqUkc4xAkMG6VZb/Ld/jwo4Qz2h6BoEZEGkAIs+xkCoSQL0P\nmvKF19zhmKkapjR5pB6e/AAlbTSeFE0TqhAGqndjCGPhTGPurBhpi1igo7l+\nVjo3C7FDeTDPIf4cuHCIIFfUAYnFyqwtYs+7IMrSMgjONQRv0nQiR6RxS32Y\nuzYov9LMO41tjy6NL69OAKK7a7s4nOvp7LNDTBMOEO5ftGIv7jW/3V0B/kI9\nQDqqPN4z6e4i3L/Hn+oF/0MCrbLEg5xuGdfcVIWvJjwznPgW6Px7lqZGQdqr\nNP/CZ/WYuT8CzMU7leVZfaKxwbTKlv4G07kI3vdTf9La9G2VpjQS29UC+P9/\n7ENZZJJQwXJRBF03l93Lqlmo0muOTnc3Cw+AstZ1rRlNqYkA0js14e07z/sM\ni4vnl1Zxraj0j54tiRFlSd1icYhPBKTg0NSOCt4h0ep/kdYKM7UKB+zfEcTg\ne/Eig7J3uE3MjejMYAGVI7OwZzm5lKdRoArBEZ5mE7dzasiUc0iwBU2hxxSB\naNbX\r\n=msLY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKd7o3t1gaY+yCSrhx9t5w0H5AOv1fhLQlNJ0UecxG2AiEA/lcZemtSSbudjmdUlAUsQ4ak/ysZBgzZ9HCKRiaGdBc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b401a081.0_1621639397329_0.6440724029122296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.012c8dc0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","@material/mwc-tab-indicator":"0.22.0-canary.012c8dc0.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.012c8dc0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VhsF1zfMGavfY+Ce6/wfidRaNtmOg0vzc5Dkcbw+ViHp7wgrpotCBvLjIqd+yT011u0kYqoWLjRWtNhod3rkFg==","shasum":"24ce6023a00bd84ba4c3f414ccb5f9536913bb13","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1qCRA9TVsSAnZWagAA7NQP/RVa44T6OWhMzxIa99Li\nW5S6s3b9MSQeZjbFCaM71LOeJN6GoPdjnH2CNJfpdB4J7TuBA60Wd9NljWE4\nei2GhCMJ6XyK/9HjPRDvxoK601yI+H2U30PJYhlbXhd48dtq1Qc3R3OKDpXI\n1Qk3TpuvI8Dhql/6bbeX0Het1XmgIUHPkV1Hk5+1Etq625f/kV9oej0xSqb1\nFd63bfAumxkhV6714KIQwUyV+3QfIzWPXrFaVyhMYbS88ABoMEWqXz08HkwU\n8Xj/ucXCqyl+lZgYasL2G4MSLhtkpn3JDp1iyckmcNw3qh8zWDO8mI7wxJGF\nOTTqnZReq/OgCIXbLkPmC446DFIxdduQr4B20C1xKCqtrRXpRH/NjFr3e7yY\nOyh3Q5RaD1Of6ygKBZFM8lpgpPbXCqI2EBTCpwxWtOXMlGse241Q+OoUPDaF\nDLU5MvhCmVk42mOLcEueulLCEyMkoVbL06t4wbtllMtZB2+fBkPv5c4XcTi4\nu1/fgHSHbauRZBPzfaoUhiC9dxbcR7RYkIk8LwQNgSJ+MGc3cGS6r1xxP6Av\nmlwVg661ugsTaDDXYDguRZMdvSG2ATD3aHC6r3pYov9KH4W0MVrTSt1exne2\n1UNC/24FcSc0MOBxQRrLpQSNLAZHeazOLzUyiSRdHx8Ykb2PbRzROgAudXDg\nrEyD\r\n=SH1F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvDOU9s0zPtM5raVGwLVqcKyodntYasEyYBwqO6uOs1QIhAOBFOmfdgNIbi35Afuqj4aXB0il1EZIQMiiSC1vygzAq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.012c8dc0.0_1621642601460_0.3865807315713754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.e01a1731.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","@material/mwc-tab-indicator":"0.22.0-canary.e01a1731.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.e01a1731.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pxlFp7mRSA4naO2sh3vmeeos4OXTj8nMPpVWb+v572L2fTKJ9jNjAtB6uPpiaPOA+MZoorCBIwVAwbvjkgJYsQ==","shasum":"f72ae25ed84bebb4b971a3fb96d85f60de6ba42f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq845CRA9TVsSAnZWagAAyE8P/1+1Yo5u5VjcWmb9Y0of\nNT2kCc5GLgKch/cKCEDvXUEEgnBDtAFqsIk8xCktnKSerI7/ABL5ijwWQLMn\nNyPidmguTlkMSkOi0H3RyZuEoi7V3qyikLRtnSQ646GziAPomvmlCjCc6aGn\nhkIbp867NiGXiD6KhYcr4UcSZmCnawCn0yzvUxdinUqF9iL7QRR4F++CMeBa\nYNb7Wc8ElJBsLQI9pZ0yD1GCC7Z8uqiNfFVwUsFF9E7zHx3HT8IrU4c8C2f8\nScgKCnIA6l8vp1697EHkZaC3GShxF4tNsI39l01gEJfIAB4H1TL1685n1ri4\ni55jVB38vB9ixCNXbO5RSLpEaXylrCqCAS2HsBotFrbpfDnPMs4VUVZJ2TSr\nwadWyd2u0MhIOeBuajrDJuKUK91b/ut0+GZ5TiAX8+gIDbeD/+j49g/o+MNj\nviY6qDAoHLf6SLjztDml8oNlKwVrxBZVMqAPizLtlhtHYcTFoZnQ83uU7cW6\nNfKjGByd8hhy25VHBVSDc6w/dLrKvlAr6RuX3D7SsYH/mbOyLJl9+cP9DNqK\n+QukJoc4GyrNoZp626MgW8xQS5d0sx6Au28CYnNl/smN1vwaHPmvRBCUvJar\ndaInaQEcHNLpR2/4ywaDTKsw730FMIgc3rJPiBV/USdUYctpX1odX803Gc48\nrpXO\r\n=+44s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm+prFYoByJRkpIKB1t9LoGoVQOJSEkur3mbL/KgxWzgIhAO/ZLBB4uH+ctcR9Ivtw46WorbbFxwEqpvJzKfLplwhl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.e01a1731.0_1621872185232_0.8530310144374829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.59174b9f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","@material/mwc-tab-indicator":"0.22.0-canary.59174b9f.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.59174b9f.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v7TMkd52iln0yd2WbEU9qmoen/5VWQqjv/CWfu1OmI7as0J2SUaWcXj02gDi61BrkA/8895VyPN2l0HoyCMsQw==","shasum":"6169b0163392fc7150c8e6cf9cff577c0237c3d3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTu5CRA9TVsSAnZWagAASeAQAItv/1lChQgPp94keLE5\nvnmBHOT71UMW5evrKgTAG3yT9kaPdCxQrex5kiQStpIb3BxrPNiijtP6u2E1\nV4Er8mB7PTL/vvG1Rdyae7VzKec++t5hDCt+pv/BsnCP2cjNu5TanaNaYj2x\nlQEH4ubqCQpeQnLSv20aFQbMw9rxHve95oqng+LIj5i7RrprQ6q6x7Uf2CxL\nBLKMSwcMwG8IAjySvfDe4RomMO2WpBZjJ3tVYmnft/WlAOfs+LeWxVllj5U1\ndqjVeT7goOvRWJxMa5nmIvuwV1B701sVXhcBYtJ7+sYpIwd2vaV+jfkgF2qI\n9c75TjlcJsElztDQBpzCV38WeymNwRIqGOHVW+rdVzbHx0q1areJPU4SpZCE\nLalJaP7iUS4aPRl67XNXx2F+jsedOVJn1nIFW34Rml/eDMt9iaqZ66yGuekv\noU78B6XrNbOc3BJ9E1cnFn2zBh9bEhrzMbo2sQtc6OS7itQRcOTJTv11Mq6d\nd/Hf53T6ZxBK0f1HzD+VerzJ1p7SnHCqkcUEmP1pPbonY5/D2pFqn3h0lgXv\nFstTPev91hpizzF0EtSKskrBXQ8QWr5ZMMhoPlP3NGxS2TRKdlit/X004Gzg\nGvmlO7vN5dPIa4YeEKfW8QYW+Bc2kWsSZ3gShnuUkyiVKwDdp3s4T3/zvZNq\nc6EH\r\n=wOUc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYbH3Mw8unnvSjJLdnwrD0xUjssRgqNF1+TUE0PTl7sAiAyWGzn3AfOPMQCMqeLexrwJ+m3bhVGy+S6BosfqJK2DA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.59174b9f.0_1621965753276_0.7571734871317044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","@material/mwc-tab-indicator":"0.22.0-canary.c96cb2e0.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.c96cb2e0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-loLEUndFBmxspL2T1K15K1AXdqehvF+a7IW9+AtYOCB9JJRicX7SCeI+wQK7vPtx9ts1SxCenj8bhm3S4xj2Eg==","shasum":"e7fa55eaba8ac1580e2db29a298caccbc86ee23b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":62047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwmCRA9TVsSAnZWagAAwO0P+wZmTBS/5NIbognFyFEO\nQNdnFjXi++k7pOiu4ltVcwc9jUbmnooxNaxDvyq9p1JuZOgEy5S0gozea0JF\nzeDJcULaMWWGNq9wzxY7oaydaBjanNY63WVJLm6TFxJKskLTsPF73bpjn2NC\n3uPspmHcfY16JAGO3DoYjzeUT3mXiKagjHsN5uHMBz0QtayyBZp+EK130pFo\nhqkl5NkH8K7WF1g6IJu208aGcai3LHlNXQmE3d3C7yZDvQZlVP9qAU3YZsPU\nxoLGwGkikqryn/ymyf/65/Ek9pn9wUAKqPl1hIHS/68391QrWxGoAK9GO1ft\nSzgNmQoAYGMP14ItDNzdJpuYVW2wY8ksLhpHVuN3+f9j0etgyliV5EB6Z9Jo\nigv6FLE+K6FxTE35yaekET68dMaRoYxkLFb7/nAnNbx9UeoPhwSaiazwcgD0\nzXVX4QeGO9+f2jISqyu2BDM8BYx6hbuAENMOr4W4DtXYTPPJAk9tTcjwJt9g\n71UXN2Jvk7TkQWJAJERXklM4tTQFHaUsI+PdXj+Ikm1gVGHv3uv5AwovxwZJ\nrM638Pbq/1J/iuqCutwN45WMATrssXYjPeMrd68Dt3VbFnAf9XWhOOXehHdE\nb9vusVQMczd0pRQf1K3iIvGhFmsH+UBb9OiuMrHWhtnSabsD7x2HEfSUoQnT\nVsS/\r\n=0PFl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCxgxeErSABkB+ZIBDsSlH1cmVj8akVOg0ovULdGGjmAiEAp0wqDSHkEv380/d6UyUGdKbsuAw/2rZJsbYcQSMBnl8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.c96cb2e0.0_1621969958480_0.19390436098020247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b9b0e330.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","@material/mwc-tab-indicator":"0.22.0-canary.b9b0e330.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b9b0e330.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bOS46z8nGADIy1pSLCE/WmnPxQ9vbjJcGDJBfMZsaYt0KTYK6SuKsOOoCBK5QUuCyzVeA86J2sk5PJKgVBapZQ==","shasum":"a280c397b4d572d1c31acc1cbe703b4adbd9b08a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":62043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWV6CRA9TVsSAnZWagAAe0UP/iO3HyiHCEVhhPFtpv7K\n5rX/Oa9LZylr7lnpaK7PjJcWZDe4iif0QGr6GobYT7G8t2O0R1ZM3I52Qysw\nOAihFL+gKDs8XSQeLA9E81HnLC6S8lcdUy46drcQXHc5SIJrTNV4jKp/bCdZ\nGFvXfxkN24AUYq8nAvdIL1TdVJkD4fkykNmYoLB5UD+hBodVVeF0Laoz+iKQ\n1fKfN4OodB6nZn7MSLf4qvWjSSRRytbpRgJKFZo1yJJkNfG+luGBeBT5D0SL\nKTq33nvQL1uQKuaMp08A0NMTgZlw/yzq2C6tzk4masLFe7Bxz1vO+JOgLs0Y\naydCjSgbF0wu9//q9+QdWIXduhlM0MuJzU6Je3C6QUmOmzU/NWr53PqkDUfi\nyFJH1l7eLW/ogKSn02mU2M/H4Zh6LUq243lgZIbXmPH+NR5dcwf63I/U+b8T\nPBFZXm3iR2mlxSwY1QZAK17apR6cONA/gDTHXtImQyFXCXYFoeSjX4zqvXMV\nRtY45F2TIZwl3tp9GdC20jeCzm1XrxFET2kQVOyML3NjzryXBNF9mOCloakN\nbO0O3vgJCUfyqeapQ19+n++T6JH2/Ce2H2q+6x/LPj3jSUEgz+1Ck19ikxAg\nLg141i+IF9d+/6AVl3Rqa1Xgs12W7sNoR/FEjIkh8SRF4tlrAe9Iso+kTaoN\nszQh\r\n=LiOv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXnhXyW3Os7UftIJeg/+o7d3zqMZUz1CgFkA5OcPOTgAIgPLafd7gDVYsVyCp9Xpy5SZm5xma6YB9or+eZUqX+IIs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b9b0e330.0_1621976441572_0.5304213331357923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.ea2a8063.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","@material/mwc-tab-indicator":"0.22.0-canary.ea2a8063.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.ea2a8063.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sb/4vNRZRmLmnFQDsmzYaO0lDNHNV1/Q/1keywow6SWdAAVXpWVG6y59CxQpV4MWswQ/z68yeF9VsFO7/gluHw==","shasum":"c4a15dbc26aba041842ca983bce4c9698ce83b37","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWanCRA9TVsSAnZWagAAt1IP/0WyGe+5Rs0agxX6pYbV\nwWxRgJIEY2o7HswcSKpxCv4+8knuCOybWLnm3b36MpCPT/GsPrL0hkHEsqnN\nI8kOQ4Evlu0UtmXIgUJF20Jr554ab53Pzi/0osF5fDc2nTNTPLvbjPh4Tmdq\nEr3oBZI+ul583akoI/tuqxLwVshF2W9r7lrfnxcX7ah/nR/rIVi8s0hYo+j5\npaeQpKSGrB2bxe/JgFIcheEIp4+3mEkO+Hvzx/YKDVCJmy1TudX3DPer/D8B\nwrNmkJQJgx9Xba1dhsGp3J7JFDcldAuW+8HH05yCs4T0WVs1ervKPSaCBqqI\nwXtPhNOtxoxfYmzsQrcq0lpc34FaBgSX6T8yS5GajsRUFZz/k2WYdmMUY53y\nSAFSJig6Rt9ZcoujINki5P6dUIkqlTwGRdvLk6hpjc0R4/r8WyPuAF2dMm43\nyfI/CLoXZ1zu/pur1AGT2LPtkseEVapjj9uU1GX6F8SplA7gouJixXrkUAcy\nbTk4S9AKuSX2Fj6u6HjHo4jATrAvNu26gSw98flSe3xbvV5kM0RybhFB+mHF\nUOjChjx8LyWRVuUZiZ87oLuA9NQcI95/Rh9+BJ/x8vBtwHyTKxsQCzxrjuYP\nRu0AF2N8CQaiwhXLuj+sgX+bY6F8V6JB76t6DOP/oyuxP5uJ4uLga59vLaT1\nXdHj\r\n=lD6U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyXfjd38WnzRFBcdwDLpR78oh/e02bDWX4zrli8GePnAiEApERS7Cuy/i+3sczUyn77FdAHrnqsMtUjTcwc63tL274="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.ea2a8063.0_1621976743552_0.6310971278606778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.60cd9178.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","@material/mwc-tab-indicator":"0.22.0-canary.60cd9178.0","@material/tab":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.60cd9178.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-niNjikILAtf4h31Q1pIFJfe5kkAxcwUSD+FTdmmkysqEs9bue1JBHyCSBr8H/K+A56/ymcrNTgmeoxB34qc+wg==","shasum":"684ebd819b34a059123291e04b048d8838776264","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTMCRA9TVsSAnZWagAAYHIP/RxxO8OcNyMgE4OkPM1N\n8aMU5GeUohaTAjRNm8EjsqUTEu7Ks6JCk+woWmqOc/oKh2ajNUxwhXtvOO5N\nDdaaX/cfqmVtqOvBV8EigfaMgWItzAFRhFhtiImw0hSWPV7JXK0cgola29rv\n9esHzS7UVdmpKxpf53nCJt5yl/bq+xEiJFOgnXb2iO+7fnYIIj6078KiRjwe\n1mPAIsGT+JW2vRaSgPJRXTbc1X4GCxRpFgPj3WAYrJ9nTxV2R61YiTSQy1oV\nQq7uqLRqNF7jGqscdu64QFwzhr4lggqO49cGNMlRADdz1Bhjd9x2guTpojtC\nU1Qoqv9mKk3nE0lDYVj5NZ1h9kNqa/Lgztu4haFNkzh7gacZ17yC7BTo2/kQ\nqF0msnFelIDTFlVlM5+2846POlF8IuNLDfNANsiLSNVUX1n+VdXmvAaSX9vm\nhI964NHwo1sYybv7flaT1x9n+p7ghRYIstf9kMciy99cxKzbI6UDOl2WNOL/\nrqlqh0wFyI4XQRgYMCk1bu/Yb3Vnp6kUq/o5r0MDQgkAZPapDbfuUkicBgJO\nXOMKnb/g41DrYqlcSS2NJYAzbKG76jcXTmjN8zDp6HE2alcYhDAzsVZmjfN/\nbjybqGPw9uobP4d0lxSm2wQjzgteOFFbIs1euF170DksDhWJhvEcLD1CyAhp\ngKA1\r\n=aNx5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGKfPLL4pqqB52gD7+Afy4mAU6VY1UHR194TbMYgXJdAIgeDZ5Dk2IXthABRrTb7sL5o3o9xXiIQ38Jvj+cG7vDuY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.60cd9178.0_1621984459621_0.4427949346213871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","@material/mwc-tab-indicator":"0.22.0-canary.2e2c75f2.0","@material/tab":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.2e2c75f2.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DpKcHlVGEtzZ94vA8/cYs61WmybbHCE/1zarj7dagA2i3bNMf0ulbohgBDf3fL0RntW/RJttSclUU0Q4EhEFBg==","shasum":"87965b7240bb813d7c99b9e8f10738f440ef615c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZI8CRA9TVsSAnZWagAAxqQP+QBG2NGJTGK5EnRgf+0c\nvsHp1NojZhyxRBsy+t/8PfNpGlvu6PZzGLGLkjC+Lff86+ELP7XFsfIlQDOc\nJYeQQGMJYV7M2uXy4lKU/qdvX6XHb6tWYSmA0Mws40V6+1/EzZEuGioh7qDE\nqMbadWFr3Fk399f0c/IcxJl4e4CaPf5fyrMBgvZRR2A1vnEMWtY97OXc/+rk\nydmcsObByEty2Do07AxsFZ42BCO2uK6YjBZS8udDGxtaTZChkAFfJBX+y2P2\nE+AsYxy6m2rG2mkUd9tgBEsyhGtG1MMOr3nKW6ATx+3oz2Prx+kzXPJG7tBX\n2Om+yArvkNeH3ExXCTv9GeU5Z3MytjWzKjXmeAU90TmM6LpxOkethl4mAyHJ\nrd+4Ey1lQcr/kSLzR65Dhnda4SjaHNDw+PZ3y8gXSVKea9nNVgoz5x7ATTxS\nsPoknF7CqkdbKMM4pCkDSTm/KFmW6ZZD/zFeZFRgRPbjwgu/pJHyvEGJR+LZ\nUByZTj82nRbTah94Z0hzVjXW+pXqowEvTvA6MSbnsEYtDduY99xZz7MRJJWl\nYDu1WlHSrIYIiCGm5IL7/8IN4E2MdSmod/8LWaC98C+asTu4UKIOgBQlk6bb\ns/3Ka6pRHU84FDUmpuo02luN8TUn2ADPYNVf50twP9proZUXD3SST0kt4yO7\nBVfS\r\n=6oqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2XFygdafBEgWazzVQ+ejxmngkasREWoQaKGjywhlGcAiEA8W6UEgzt+8ZCSo6/4HxRj6PqbUkkD97RernGjw+ZjWE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.2e2c75f2.0_1621987900215_0.12581582154690207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b99c77d5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","@material/mwc-tab-indicator":"0.22.0-canary.b99c77d5.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b99c77d5.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nDansZEB0NF9KAN4gDWkU1CdfaSgwnuLcTNs0+KosUi9SubgH1wTexmWA5ZfYiuVYxfTQv4cfcXTrQyP0BvAkQ==","shasum":"f0938d9960fcef6b8e4afa49d5f1be7fd38bab24","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3gCRA9TVsSAnZWagAATw4P/0cE5oF5VPipvdJon5ck\n2HQ5d+LCB+F/bxvwTFSxTpU+PjALzclzFSBmldKg5z1AphkGDYYuDzOyk/ik\nn0KDdhbqnkM7LlMa6Ul2b83l9rVlmg84PWDFiu6afPqnhykzjJ3u+CTGvyLA\n60heUNe4S03xXuyYmLl6hNohr+qOUd1aeJf3wuY2SOrcA05F4ZCreS2mGWND\nGVtr7xXLErM/MrABZr6BPFuBP8VzCLu+G4tq14+mP+NUWMcRvqCV9vZhDmzE\nqjVpkRp4zMqjdfndrEQu9RltWL5aEmvMXyhKBsL2dOVF0ksUdXd2RtYReepg\nHwA5/Ndoe/kcB5TpBTOvhf52UHs+ZKdlYTkgkYFEQk2YWPqKRfWptGUKftuV\nV5JiZIS+3VriilqvbbeV9t0Y/IOKe2l+WmcVedOhVRWHaS+8iZCt5V+TzzTZ\nA7vGShit2NuDkOwxwemIuo7goAZS+BW+JE74I687KRLv9spSs7hPIbCnENSR\ne0z2PX3txX/itlGJ4khAbEtEkBt4yWxV2TgxoDKBDEQj9Z3WiuAixv8/UIJq\npIgU0pQdCE7xxISap0zFu91ALsBaV+NPDv8JoWcxcrBVcrNk5ydKDn5+9VD0\nU3FTHdDGxuUMpjxb0+Rbf70bZwF6vzoLRRMegbbSzfnX8zQjhKXbc6YiHaNA\nM9eN\r\n=y9QI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5Ne67HFHucGReIowwDtN9jy7zCibVqQqg7oCmnZ1HZwIgcxzvS439WpHLbtFZVT0DTsXqpgPcOHt9Q+psF5UUs2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b99c77d5.0_1622056416463_0.4352508132817461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.0de82c12.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","@material/mwc-tab-indicator":"0.22.0-canary.0de82c12.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.0de82c12.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-syIXj2XYp8owSMMhjfBGOwci8JRCqbmA4uS0n7MlzS2w2i8s2Zeo6dCrzHN3iHRzdVdrzL68J5hqoCqRb7skgQ==","shasum":"43736c925c54fa7b81c027c26fb979e1c0900d3d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4sCRA9TVsSAnZWagAAjMYP/2or0xufDSS2Jk+W1Ioq\nZeZY0OFheQGYknEqXhC0fGbgBeiKRKNcISPqg5w5UPWwYRIvMyx5DjFnpas9\nuhw8uBRyvmuVYWe8jLYnuxHZzFhMbEpY1ORQ/aaHGVhIxzsiy0IQH6XCK03J\noPkJnkXR6NBeUDBD+GBp9mwDfVf8Fv+IJueowZie1ex+HFF0/P6PxvmzVUrm\ngoPW//hjzyEIkmOqSh0unfLNzSmi+DvCsVOaOGZKr2Qq5jNsqPpFMel3KKqt\ntIC8hu2nmatMkB9SRuCPmubI24CIdT6sxNomdohlE45xaQxjj/FG/068/rCa\nLx5H4yqApC3Adr+NEn88mQx9V8vM8jf2l/0Xnul2luEQ335v8zf4VxTq05SL\nS4jmoJdbyTCWdp1YarHKmLn7chDZtVOEba8FJA/u3iBlhYqvbtj82IWtQInI\nEA5tRKqEUG8YuamYJFTT3/xIxvlbJMyLHYg0jYzMfaucFvBfOHX3KEz0IkZW\nAzQseIyJUr2zMst/fw9uhlEWX05IzsI1zCAYQAS2OkP1wG3IpsDwegawOsEf\nyJIjsI6f5oDxzV6sEdGhf4PvQhWbmysiDaf3MJBgqa34BpOBfFYkOiM5Gqnd\npHCUgiJUqqIFgdTAuaYzpqAB0Q+F1qlFdfJBr+xKcrwBd2JT+tJWOEqPspxF\nL3lM\r\n=qXiX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArV0lVHnZUz3qMAVLD10KqOPzph0jHDwlFMP8W72K+FAiEAnPdmE4TycGKVRZONGIjvQ+KYWJ9D2vYj7CGtd8ZeRB8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.0de82c12.0_1622064683968_0.8021190776486662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.227a4614.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","@material/mwc-tab-indicator":"0.22.0-canary.227a4614.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.227a4614.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gZPsWTPwQVFHv5GaFWVX8HUFavo9sksj8d8QrYOkX+wVw48cPFBGzXETOqzL8NVZUVz7tjC3Ch7v3Iz5kdfeLg==","shasum":"3859dd8804e6a8ee033882b182d097881c2f4a4f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LUCRA9TVsSAnZWagAARFAP/2Czr437FXgDNECPF9M5\ni91W/MGgQXpRTS6hZq+u6yGxuAFLJtKujAnc8PRE/8rShqsJi3mKK5oICn4r\ncaIU4dOnyA8jWu9G48FTKxYWIjBaWk5zpek3F7mr0+oHa/5UjB7sE1YXPXm+\nUdAgsiGtqv7O6KATDNG2GeiAdF7OGp9KkmDfvh1VSt3w08/CGjj4hCGssU/n\ny/RpdNNkIUhpOI1xwnr9g6ovjEDm/j0IFLDFcNbGGMrXPH923XckMkjHAnrV\nzNFGXP2jibh9e/SdzW27OnHnIq3v3l31Ab3FEUnxE0ghQchradvW6mfczBup\ntgx/uooPIUoHomxUqOOVFeUN7RYYbiKUpvTcNysrF2oQfkN+yJSvr/W4AXr+\n/xfh1wN65QkGU6Xf10+roYq/efT204vtLq9AOvG+l5wJQoX7VL4iJycW1uQc\nZfWppBOFAjFguGyV998Uy3o8pFYmpgmnx1AwQgemDPtdSUB/xOe7DgmS3SYT\n90+ob8uVzOSAkP8sqAzJHxl+DIj/ZereUgshdh8EbxRwv7TKBZDPWGaK8vud\nHmNmrwnQXUJkrmdMk1Z5p/d9pecxy6fKbMcO5HDenmJA0g6nzQo6pzCuU5TQ\ns8Y5UUz1EZEPImS8W9Eytb1zBuhj3OFjXMhKOE9D+uzCIPq7K6AXs0xdhKIX\nJ29f\r\n=L5xc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFU4TTgHIM13t4gSvOLv7JE0tIUvVYoHIPhw31POaUfQAiAzfhbnODXSXJr9mHgkl6nQqmvYfV2sV0f1uFdKzOltyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.227a4614.0_1622131412163_0.7291500349511415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b3d21d31.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","@material/mwc-tab-indicator":"0.22.0-canary.b3d21d31.0","@material/tab":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b3d21d31.0","@material/ripple":"=12.0.0-canary.8530d3514.0","@material/rtl":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uPT8uMS3bB6g4nMf/b71EO7qcY5LMzAXb9sFWWKMNn/XWaPwL3y3xDS/QyLKeKhbQO1AMpugYXbWaeMLjAC7Lw==","shasum":"bf3cc8b5b8de792794c3efcc2766656d164d1e31","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jPCRA9TVsSAnZWagAA1MgP/20wonqjVLDy7nSToLSa\noMQA9BBTkBvWGpyOKrFhL927fn15qjIvO5vr9R6ceOXhnTkXvWg9wrayCi/h\ngST5PnRU8y8CXq7po6zMYXtSNbfn8zOeST+PS/RSY1RK4lOqcBUR3pXiwVrZ\n+VEE/VjglPCPYMYyQ3ltVQ+SYRGm/pGkbKMeYJKk4ifzAlJeNMafosL+dNa2\n4t9PG07dpbhnE+OvsgghhWEwO5uk2NhruNLU9aCWJIN+zJZovwtKa9Izv3hF\nYqs4s08JlKlSycvs+Y8VQvbG3177aaucm5W063Kv4Dv+URSyUR2u2A6y0aap\nrK8pdUnM/N4IkCko0lQuti++/zPLl/R6ERkJwKMzpZvYz4cO5uX73o/BcWe3\nRms3qvYTm+kMLnTI6ZzrfO8GBa1XrK3AaZC4OGYHLswb60dzLNiVWJMJi1sJ\nBgox2mtB1Q4Pywb5hll51owQoI1REJVCX9/KjFgMRI+J/9zdOxyDOzJ41dRY\nvTC+1jEr7lm6suyuDuSrnUwsV9MxRDmjZyMTqI4+F2LvDEaTdwuEqfHYiW/v\nr3vBC0sTnD8cF+yjZC0E8uNZ5sFXp3O3csLw5JgctV+NNwCluXAHbq1c4Igk\nCpmRMcTqFNFHvKh7X9ObHtwZmdjr0vOjy2QhrCCO/zHfs2rlaNeQmYpO/O1A\ngR/E\r\n=NhL/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8k4tQsHW04EcQtrSs2t6LqpajToc3kO80+NkYD5tIawIgSenHPwmFx+520To2PxeGSuIpt2/smilIbFj0IBCY3oM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b3d21d31.0_1622141135108_0.9079728345663878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.288c33ec.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","@material/mwc-tab-indicator":"0.22.0-canary.288c33ec.0","@material/tab":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.288c33ec.0","@material/ripple":"=12.0.0-canary.00b5899dc.0","@material/rtl":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KvMtsc2sVI38Olc88bwkaNAGBJCcqFO0jNEeKQrN0THDHYsQgkh1PjUwRi38ZXFzP7cV5eLGDHFawn12gSNDOA==","shasum":"0a1553aba03be4e4073e9b3288f7791c595c6952","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90DCRA9TVsSAnZWagAABx8P/0QijpGfn3X5PWW1ohgh\nNyqA6sz2bCOatgQV8mLT/mZE0ufGjQODt9i4mfVYoxa5LkCatcxrgwRQns32\nR4Ctc2b6rUP2eeUzK7USkNkSzHKYMKk/ugor5DnojGUA41nLwKBNELvc5s+7\n8fdV5igrgxwxtDSPLCmsPt4F4/g4VSzGp9lsLcks9fmq4vn7tPBySBO7nmvI\nK4do8UrLLHBioemrJypl2HH3kJz2pUCYEHGK2+HPzxL9Xk+fb9ZbSmxii0TC\nIMCjxJ/Kbs6RtbIu9+w+GTxLBQdkxIuSOyd624ynNWKwQRJXto6a3o46qJbt\noWv4FT13TLggm97F2U9Pm3Sq8N8FhLr7jBzaeyumLmpMcUbXpKlWl+U01yPV\nohzYWtYDI2hVOmA611ITiDGArDFffll1n00WkAspgXSq06HJQr6pB+sSRKLV\nPtVcQe/Pm7KjhHfe1TKxHWwcYIqAHHphfVF2zVRo6Kr1UsQu6JbSewDXwdiF\nwK3Q+wB5YLfOPNwe1/iGFEvovJAYECkwriz8rxj/+QfVJaXE3OTwLg+bpvoD\n9ElYNJG23lx22LdVVcUOLPmW1M70kb0ub8Rp3BO5D0v9Y4iOllYhcWhqxFd+\nodYB/WclMjpLYbNVjiozJxdF2uQ0N5izN4jinGg4MPRVUKnM/9/6pl02kOnM\n2JqM\r\n=GVcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBb9+51ePeVH1TV8iveEosM/B2Hf1Di47XRutZ/9uPPqAiAaDP9nY94+qMpMk/7ZFTvz32cc2nVapBzZkm6W+03qMQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.288c33ec.0_1622662402915_0.6666956433627043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","@material/mwc-tab-indicator":"0.22.0-canary.7eb7ccb0.0","@material/tab":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.7eb7ccb0.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5aXPhSoNiRzv1PVclvltWVvc25sRcEkGzAfCnDD/FlgZDoAtRzcRjVVdUFiL5jFcmjchnExtU8yrkVWqV7z3LA==","shasum":"61654a23e29fbe3d7b77888c08f3c74932bced3e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOsCRA9TVsSAnZWagAAabEP+QGNh0Fng/OJifGXYkae\n4NsoOz4RhaIpKaNAgiGsnU1shstWg4W0j2K+brVds6QD7XA037MTcibs43q7\nlEnvufw2RLa1Z/Ytd1MJTItSstHxURYMOkd15GbDp0P7AjLrbTs4p4BQ5F6U\nlVDW10xKeSFsHVlivseLC7VtL+BCOSxTJxqFuyrEiKpiecoz40aF+YD20x3q\ndE+oh8uow74in6L0KlKwQ9eqlZIgSPAFkbX/wPTaA1e8G2xECEnDh+7ONr33\n2aEapTwZkAZkgxzKbP7P46qEKSb4rVJJIBcqq3AZSngfLekhqNKa9hOQJyG1\n0PWcGxGmEDEDDXupzeYTRg+5ImD3Ui9sKl9kiVGajhKNQaqg+HPtdvBcD/IL\niiQ58n3LmGyCpqlcwJsM6Q+MHEre2nCxdI+sNyl725Fz9zggm8F+bSFEU1A8\nnSoPbYtCuTM7EkGmDVc8YMwmHFyF04sUhPhXZrAEdLM19Gu59so6YUI0uAIp\nUdu6K35HBegbw0vfF4MX1oCwPGPp9FuppZH56FACX8nFa4oK2iv7Jd+oScgz\nhzBNTYPn0B358iSdD09UO0b9nFAJdUyMJEAlBdYRiH+2PaydFV1P7PVEk0Zu\nu/JxtswoDtyFZDeC2twUFdVS3VUQvDDa07Yc7dRBwJZFiGEHFPAmC6v8lcuV\nDPUG\r\n=2AiI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+R41b6M9eLrzL5acrWLtqrhWt9MQ2n1kOXg7puPtfFAIhAPzSbNj5OgJmbS3GX+RMMIqPveigQqiNE5mIlisCkxbj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.7eb7ccb0.0_1622750124463_0.6209917400461287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.7fcc0726.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","@material/mwc-tab-indicator":"0.22.0-canary.7fcc0726.0","@material/tab":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.7fcc0726.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VxNVv58jATXihnn4DGC/LMyyLdBMEw4DckYFETIE7ApsutSaUh4PJVa8xw42AcTUxRUw49FubjVHYWXlTll/qA==","shasum":"fe459f19038caed844ff1efb5917eca60e3de81d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr26CRA9TVsSAnZWagAAdkwP/3mAmSalSk53zKsvpjxr\npIvjYTkdWXwubUCXFYwckQsfvaMjoYDErmq2aIK5uGqQBQ+4gydiAEbe0I4f\nvmXOh6+ivLeHAuGoL+9BoMFDDI20rSFfDtppP23DSIAoUalVdXlLAAGj/als\nWfNGd26J9QbJwFrgW+4n5+Iz8Po8AGLF1BWWTuFqRTAq2yjSDJkHM3PDv/q5\n6tIOZTsTeAtlMj5O6eGDwhdRmZx6NkZIzdFnJ+rkbFM9/uIB/ihwmr6khr/R\nEIqefPHVtw1oBbgN1B1DLRsLyDHoSsrN1C6ruCMLENG4d+3mtxpp0y82BCGF\nfUE2Gi84vTHecLW4gwCo610kf3wUrHnR6thKWWWVH1Ge/iYVcxQwdPzSEGqH\nwPrYWkHjTnSwFETjlXauvJWSt4VMj7WNPzJGnALw6QABGHE4QpFG3+KnMzct\nUvdN8AkNRpcLpnEcQUHBpSgu2biZ+XUUMVIamgjDD7v5ABNDpcwpcEL6VDFm\nPf6ksKMToC1Mvbq7IGsuS9zb0AmEJHmcPziBGOEiglP45izBgMXa0FABSQmR\n035OXH7ZbXQUOoqbKgy0rIHhIMHQa7cQC1sm6HtPiH3iRZSmFMktgrne1Rt/\nmKnvZom0IaFEUCqgctorHTm7stjYB9fCNGszX2FDye8chxNGlZEfXi42m77H\nXHo8\r\n=itPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrwGn/4IRQykRp7Cxnm0Tam1kqt5F4jjlATKLAaeK+0QIgPAwAdil5a6PNyUyO+3QWjCxUfP1jkuD1Ir9rz+5J8n8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.7fcc0726.0_1623113145942_0.3825945509188453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.220a4e5e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","@material/mwc-tab-indicator":"0.22.0-canary.220a4e5e.0","@material/tab":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.220a4e5e.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HFqx/CNNMOlaZZJw4JFecrfh/SrUx9ZrjMvgXcuCeP6sAlsTW5M/qLORSdHSGSMOtv6btBRm4T0k7pxDq9Qg3Q==","shasum":"ed9637c0fd6fbde2c807545f3f66b9478ba5d148","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63gCRA9TVsSAnZWagAAC+cQAJR5KbHR7YswDyHakmse\nKCSvaNSP5IPuhwJm1sY5B6Kh8A8gUX6zOqtI7VzXTr0XVDF2uPgsTtGY20x7\ni1ONXO8VbeCmD/2i2wCZ73NloltUJ1nwhi5Vz6NpFFrtzKEBuxXebnVSQM1A\nZwFM7uA7Sllngd0QyZnQogH09Wa5kWg/i9+PQeBl5KELfLpER6/e/q3njvEh\nEYp2mW1ZUtoUBX/liJn97/Enq090ZPtRqqwSDPJqZZw7iSw970uTQrFG3T8N\nx7Gn0EBgWQ3E79p7iOkY11Hm6oaFuGQjYB4wmE67lA/1V31zyBZpc07DZAKP\nzI4sy4DIFMFHB0U0P3dGKl3zhlvoMiiwGXcW9hlNsoH2Vs+lvAbuS2CrfJRE\ndDpms05uyebg5cbuPR5p7Bbor6oDaqwMgGCaDj7N45heJMMWblaHZZ/Pf1aQ\ntG6dDUF03WU9ybcBAssa6Pu69P8N1lzcNCg3RXUzJXpm+0tUeDcSd42TudPx\nVW+z1GBaLWyo5u4HGr5RG+r6ZpJ31xupJomHvV+uzpuRHmAtb+xPVSrJETYi\nqjPP4P1BYLJUa+OUOmxdgTNL/ISqegxWcrDzwvBgPDh3vDvoKRmVKav7ZsDS\nvzofgsbIzqaZbkkaD6zc4mSrWDVnE3UWRjpsGfkYTR6J4SYjvQDlqSh3DEkZ\nAOIS\r\n=zdht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnJBCYEDueZQDbGJQPMGmghV+mi64zgYyNc9kEBIQcVQIhAPLlTEUpoCp2iAflCapMULX2k7se3mpWkwJ8wY0I0z6p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.220a4e5e.0_1623174624580_0.33122579119322193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","@material/mwc-tab-indicator":"0.22.0-canary.6b2d6ab0.0","@material/tab":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.6b2d6ab0.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sCqNMFeVtDiahDbX80PZLB2wFDgnxIOVX9etQfLwcI5WyXk1v2y1DocxiSac2OcrQylkCtWz5/s8bEuzFkubpw==","shasum":"5415b14bba93e6f672a5d159e19b91c6820d1631","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jHCRA9TVsSAnZWagAAPzAQAIuGFtGiZdMNJYyMrN7K\ncZc6c+nk3MTzoShtQxvzf9RO9xKl3bi42nG1Y8YYrwPiGzr8EfujSmKm/8cD\nIfVOWpZDy34DhFHWDOAoNZ3Zm7CTcpjRFzzwT1Ey2trVBimxJZOwttW7BwGg\n6xtHDfqR14+KZL17Sf6Hc0BM/NORPFRApwAyjhvEpa+n5+q2Arr3dohPaoHh\nnazWIbJ9ALrEmu4WWy1UsuS9am0wp0cV7qliYZbUwNaO57J5Li7386JD21Vx\nPUUhuBtpyW07tYarTE5aoZiRMqtKsvZbDA1RluftlURWx+MI4aFh/4/mVgad\n0BETOxOWkWuL4w47oEYq/E0E/ynC3h2ymN+u34iFLVS97pqHjBInB2om3aMn\n/FkvEsrvZVUlO56ubZq4tQNJhPe86A3z2Jpn9qq2PBptaYPe6XNPdtRmxRmD\nzhP6oTeKrHj/LXaV5Lz17ySTT431SryMWIMVCCv7wvJ5W+pmvVMSJeA4I1T9\n1TidrjoYb3rk+NlJuNu7gIwCI0pTPA7Fxe/YNhUOh1eN96qUc23P3g93nS6+\n2Lx8veRi8mqY11M7X1KSiLjhgy1QEMf/M/lVjFKjRwbWUMyQSwSPb9pfgjHp\nZXCTpycSHDduINxAMuD9fuDoZrQNdiVi5ZbyUaMck9+dBD8IKwJhV3sgSGca\nRvPj\r\n=xIin\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFUwlvE813X2dwV9CEj+xvMf94BPB0YEAS3C41q/TnAQIhAIuwEP4myrLu+8DRsz0qMw8Jk8Jzk4KLUxRShkal/Ag2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.6b2d6ab0.0_1623177415392_0.23251118773941593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.2b20825e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","@material/mwc-tab-indicator":"0.22.0-canary.2b20825e.0","@material/tab":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.2b20825e.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U6WR5lk6i9B9wIaR/rSGrnbbX4/BhrlDSIANAVKYWHJry5VpZYvnItfsB91A/gy5n8koSFtRzaE7tBIs3I1Lgw==","shasum":"8d646a12fe4c4a6152edf90b1d6c6f85fa281374","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/Z9CRA9TVsSAnZWagAA7b0P/1xISbwpl/BWnALlf/hP\n2u69uG/Q8EqsfCuUx3AfTqHbhY5KtpK8XnrbO+Rmdhfi2RUxZeyHP41c/E47\nztNTUXNZMFL4Pyn1z8ieIHRtVMfWagTg5U6DG2YwSS2mFfRzIRho3nRwUtDu\nPYBHUC2GgjTkUYTWEEsVhMe50tNW7/s0aB4HNgg8u+4hnJNAOWVURbg2CnlF\nlRTr/zsmegtWiRD3NLwUnlaV4JPTuY2IFHA2wyg5QJwboFj09AxfL74ODoCN\nSKmdZqB7Y2M8SLibniCGGKCtLMh5y0QyMZGBucHw2rWaWljy3qFGr0qCjGqp\nZVYXKlz+C4OId1OJYGedSltDg6OjK0UWJBfFqPE51PMiu8PzvWXyXFzQJ0b8\nS935sv9x9iig/vba6kTDjuUs/IlcHhab/4qIlTrxQ22tjrcxkEuUPUT5cOLa\nyvcRgrtYt6CeKrD3EdOdBlrmxqZkFFZIAvtXcEaPWIuQi3E9U4y4AC1up2RG\nGy3juiwqRXRfysLmR718NbcsNQUh1Lu6K/DhTZjXrbTlXfLLFPuChhhF00i1\nDqv8q0fR42CV/JQBdPQ2MSFZ3TxmqOKfjFJD2Ufe6pGjXa40JjAHPlCb2fk3\nHA4kwiVsE8r+LwK1796wfMVGmzEDzb6SkLB+iSvdh9JA6sbdlLk+Sn79r2rc\nCwkx\r\n=vED+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiPNV/4VkF/d54MSow04xv2UZ/p/NLFbjZIwhRbk0xoAiEAjy/XvnslrgeEtAJksbgzK/sU7LxevMMw+X5h+AS1hdw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.2b20825e.0_1623455357675_0.6457195459463936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.e1511867.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","@material/mwc-tab-indicator":"0.22.0-canary.e1511867.0","@material/tab":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.e1511867.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1IgmHZqozY1V2dKhY+5DcBfRbof3cjQ/epgX8Lh45Yu8OuTIUC0DuE16D9Qhco7SIcQ6hI6Qfn1w4lEOLsdvRw==","shasum":"03b74b56763ce66d02a07d09d69fb6b7d8d18913","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZ+CRA9TVsSAnZWagAAhDkP/33JuRyPlFCNMsjacA2x\nIleU28Cb19tsRNjrwVbGxR7bGh/o2jTxWoW1xIjpXIHYc4KY4EmK2gSBb3wt\nppQhcmzpq87e0P5wd9OJxEwQt9WGiROBaD3VnXv+IArC2Gds9oc0aMOli8D2\nQ55sg6Qvovt3Mo53CEu80xTnuM1Z24sOyLwJvlyTSdoK8u/MBdQnkfj3Y/Xg\nZ6YjH+RNvZ0keD+4FbisJroZUUi/Tv7Pejd20TJANlwKl1+ZEpgbk9fmLMrT\nKQSxO/DawgKpW/cks+bL1D1Bbr3RPF2wNhdElZMju7yoql6QBd/o2XHvDLt+\nkyK6roTKCSHR872NRONMsIqGZY3oYZk3i/fypM66duT4GM2/Y05buWvueI1T\nLVVd22Za7HsiiS91knn88hA4PB5PtPns2Pp/vm39iFnN1r+Ttpqf7zo7uzLt\nOKblLnnhXZ3j+aPZdm72At7m7VOGmI88iFXWf6UGiZZfitIl109bXl/DuiaZ\nSIm076ag/4yyumVLFNM1ZwypeJ21a9Nw3kggK0geqnVzU/2BZt6LDXv+om79\n8DHpCm9d9UJPvDLBeH+cWBxMJdPQ6nBQRKah6iF1Y95AJ1+H3J5EA3nM+vb+\niK7249iWqbQ0pzd/hfa0n4F+yM1w/rDKEPCnYZUUZYLJRFv2lnul89MKc6MV\nx30C\r\n=Q3xa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF9tpFr+tXKvd8xFbzHr9/doDN34g76hOKSjKz39LNrAIhAL7tziO3vl+RTEceHor5bnfTG0c+Amj+eh/gZ7zT6N+u"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.e1511867.0_1623459453962_0.0832491708667138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","@material/mwc-tab-indicator":"0.22.0-canary.ef4a0c0d.0","@material/tab":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.ef4a0c0d.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sd1TG37c1uHE7bq1jdt3H7e2ifqZeI/2RAQXKMXL5Fpmr4VMZjoU8rYnUy+Na1eUxTMaRSZ3pgeNt+b8WAgvIg==","shasum":"3e98f40a4accd64974596a1cbad446f884e0a3d5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":62059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTrCRA9TVsSAnZWagAAn5oP/iIytdtSgy/iofklO6UV\nAbIlPat2CCGy5/tcHlUzTO/5AZPJkjYqsu4jwgwsBb6nP+FkAorKTY4ChokI\n1etIngReMH3FcnIkT+3Ey+jg8ErcH76b8PKJIL14ocAMwlGj+UHRN2Ulksps\nUzlzt+HtRhIMojip88Ni8lgh9241Tl+Vyms8SCIJ+G1ICr5wBnR6XRnUeVJB\nCCDw9AtZD0zpB1PGRQBpCv0qBJVrOpjE+1D/BI88OdRjH8ylakgZs61BwTVt\nIQboyn5Hg8F40cZ+KGdmG0EGuRieLb7X9lGFosXPo6H+zvAwknTushNKMGsr\nMylJ6boRaLqQP1M12JvrY9Fd+KQp/bAoSStW0KK/lB9V83GJCTDXewwg4SoQ\nurdpbjXTM9jRRcVR8UlODdO4J1/gPSGfI4HxY0Ki4idA/rcceX/6eKpKVGaq\nwaC8SSgL2YjI3i1H9dbY37sUpMuPcaHh1F9UjKuYccHe97k5XC697nDfyol2\nf4MozlM6PaftJiNEVmbKYh+r97dtp73Tx/hkrfMGDomVSbeDD8nUTy9o9+5I\nNhE+QZnttXBHYBuyZmqY96RJvdRycTs1ADgi4yS/adj71189Z2TW65z80GGK\np+hkTPkoQBExBojBn9FynI8ojVfSqXJzrJWzsLHoVEQl4CrXcEq3TgwBdlay\nQpcZ\r\n=qFzz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD03bcUUWYo21+XNPLhQMysv/6spMZ24fYQTa6AE6jJQwIhAOZTK7tPh7HoW9qeQd6wBR1ccK0/wKBYH1VG/mNl67eh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.ef4a0c0d.0_1623786731164_0.5187155069268006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.573d8913.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","@material/mwc-tab-indicator":"0.22.0-canary.573d8913.0","@material/tab":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.573d8913.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ixBGqNQJMeQZDx60Psuo4SgBELDKwK3WNV68YsFUwcd6jLJqB61KYeqogsG5P2GS26arlGrkE7dl6QCnrXOj2A==","shasum":"57932bd667e36b46d4623b4b13d9da49bdcc2b07","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvCCRA9TVsSAnZWagAA5b4P/2qM55FrECNVx8maVM+w\nnGroebif8AFqQNT1HVZj3qvyYiYU19OppTMbibNpUVzBiPsGYShE+XVHZp8u\nYzKDxN6MJT9sT82GeFu6KUfCsrpJ0sIFQp2jaQwZA987ZTQtJ2eRdPJrATj0\nJgq7wl21wqSAudSob5R0lgOyYtu6icJ1fRfLypaEg8MCNVqbRy3axpE/ocK8\nmE5/dx5rBfZAiFojKo2HMe4tixO0w44Khf/8VfrrvdJomfMTVnFdzpB95XdW\nUlUIFCBoN55Wvf+PsmhBcv/YKCKeDzywCx2eSwfnPs75ce61AaFVY4RkGn1o\np0MoiM4rtAyvXcCE3Kw50H3bnDPwThgD5O1Y4tbxPfL/zugrlnIRoanaFNw5\nQLA1cr8N/pL4pIUDEGYfRcFf3eXk3wQezo/BaT/dC6we61pGUv2LkzJJulh1\nKdAOG4Vx2OkydHAk+RmWgMX6BJStclwClyKmFiczcBNta8aPbdybsHWMwqph\nkZS55sGvLEHVTVgqDKLnHq//oGOD9c5N67B0aerLcvluSS2IEoGhZcVMP0o9\n6xFC+FcDwbtEh2FBL/5ERRJtpOqRZQiDzulN3nUR96cKlo1VHc+7RDDLVhMQ\nehStHK+Hw4wFB+TyPAKqaS6Vv35qhfWNqqA/KtsYExH5j3iUkvOXjgrsETa4\nqACC\r\n=8Fz9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAa/KWaBbRcoOEL+E4swGqn8R6Oo2l1ECuT5idXwJu7gIgcye+l35pIYX3t9/esgb8SFY6ZThL+c7IvsQFAawh7aw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.573d8913.0_1624058817969_0.961545398974492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.21dba001.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","@material/mwc-tab-indicator":"0.22.0-canary.21dba001.0","@material/tab":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.21dba001.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tnePI7VkSLm9sH+5oSxMUFPqao9yTRWwoaWG2D/N7Hlmz7RKmx6HKSRklkGGOIsf+8CSVun+tY1G9y7WKeXWnQ==","shasum":"262882da49f99c892b0a93692701aabf6c3ede92","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdmCRA9TVsSAnZWagAAzDQP/jyS/SuYtY8KK6++0k5E\nHvwtw0A8n3EZMdMnXX+fSFPVcQb9r02cOoZ6KOuwfflklwIy8a+GXgFZDJBL\nlctiTIQAVoWxjyOuCqQr/YjHMfVS388mYZzPa8eTZhR5eYB/swPEc62T/6KC\naJv39iM09KyPsHOl5KTnbWpvde6XgXGP41qI6uFeCZbgcwxlufCNeCxiaVb2\n/IoAfUYml6nqa6lbuxabOMPTwrrv8lqCqxSsF4uF9mGDNiT1iDmOtOcm41jQ\njT8y+Jvwhz9/8yft4lWZP6+Wv7bGXTh9Hi3cAXd2S3PqvqoJnEJvXBXLN5Xr\ntt8LXn+Xmqj1bbexUE2WYd7pEV9m9JLaCQSHKx7U6/boCxSiArBSsbt1TvvN\nq0yp1QVXOPvUs11geQZiSd6XBv0WR99VJPFwtEiesCFFtWlMOoX8M9o+O+8y\nRIuEQvW6Bc2IjnSz+NlcZly8QTOFGStGuPqe43+Phu/jCaxBYMzNKSvf9GAR\nQGc2cJ1BDYR6gIkzuOVvhnLhjuRnZvw14feI8AFpOE1mVfqIQ8cGQ0cvTSV5\n2B0rEUPa3vStMGpJ/F6zdr82MVP07bVjaiLsFxu6BSC1hMfs4VzDR+1ScwVL\n+jn6CgeAX5YjLchImYL1fWy7YkZCwDPUa+b5CyMqRkTb9iJhHnSG3VCtzBPk\nECJJ\r\n=ZgCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnigYTzeWymS8SpBPrLSvbtlFcuRqxFDtmhJghZF+dTAIhAITaTfBVKz/cUBHi6pLKJjYvxJs2R6Jg3DSP54r/R4Sv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.21dba001.0_1624311654159_0.4900588349865722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","@material/mwc-tab-indicator":"0.22.0-canary.6f5bfd0f.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.6f5bfd0f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a8x2kYYApyvXbeqlnJiQMSnl7ghhdTS2o8ZVviefU9WEtRwYeWetll1yMnaPby2x9T8gsKawqK7nWHTh+u81oQ==","shasum":"ed5d6c66df61d4ad3d244c2ea6c9b43b714833d6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2VCRA9TVsSAnZWagAAIYIP/18hC6zd0C5qXlyDm3b9\nPPPLvLFx0kvPPSsTFa5MPazzYH3TxSRU3xz4XC25bNp4XiY88xNHH/J57BUm\na2KKa7FD+PEMO9hkjQnAYVOW5WXqqID8hbQYULWaQpnPdZCZB/NiJojuTNoJ\nK2gjwhPgijZqkMSE1IfNcKhGBlpbEaUZjVLVFqWo7zBn+LXkM2ZHSDRLx1vO\nKwx++iv4F33/iiXWhFuLTWEnLLO1Skz81N8d/l4QEnxTOIOGDlU8mqRgyJ64\nfAOchXfu05VKCRqyzYVINowsypj25v2dpc910u3ya/ts8FHp7ve0xUhHUBba\nQPl8XSXhFI6rwceHD3olRzlEqSQMITb2R1DDwkDGFj1GlfSG9qfQ2WFIsmyA\n4gVaK8cVANg34Naweyo2wlTV/B89l64b+WLA3baymXjWOqtb9O4t4zEIyw75\n2Jjb04Tm0/0FlClROq2hMAzmSDmb/RalC17GVY52C5wx7m6YPA9EJ+c9RYvd\nafsadUzeVg1UahZarWAAo1HQJwk1N8wgSseUJf2IS1V5N8TqVNLb7zf/lek3\nuE1coX7b8tNFaMKheYzuqRSnX09zZK8EPdwMhg1EWpRr0usGPgcJzJoQjg0n\nQ084DYDl8fIb1EO64DMBNt5KxmFkiaQkzOULHu1fvILfOOxnajVr4BGK1WiU\nN2NH\r\n=TRHF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+t3IYWqTQR+9RBL/XOz/iogN/tRNaCjMG4CAs2+/fYgIhAK6fyskDODGhzcvsoE3bcQSWfqLEU6HJscwm5ERDK1Gb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.6f5bfd0f.0_1624575380966_0.7023701346662499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.fd8360b4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","@material/mwc-tab-indicator":"0.22.0-canary.fd8360b4.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.fd8360b4.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MJ8IWshCiGXQO9EGYklpjs+/EdKyKmE5rrzNZq/fut/Q7NySQkvadVLxot8Hky7C22o6p/NEbbSmd7m0FfroNg==","shasum":"4a686822f2f94959fa1776324f3b641b17295416","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1innCRA9TVsSAnZWagAAoikP/iuMQm0HGQSW8LMeF5vz\n3Q7Yt61331OgBgDDPkH1mZbLvDcpg05T3fDvTZ/XbUT5rgLG37FSNx4oKsw/\nAv2eoVd0q8H/5rL2QoDmd2i1m1abABy8kG5BDg7uYg6GVg8iCfdG6iaqF7Hd\ncXuY63NwUiUOksz4zfwHVV+8Q4D8rg7NfeLFg6YtSucivn3R7fHngPv1J8vb\n1VQ24AQziAkaBXc8tIJpw98mWuRp7gYjzwXy05I/0dNadTAyzKfyN9+wEw7F\ngw92wt6oK/fcHT/onC1YnRU1TCXn9WEXTHJmMXZmtppAb+j3KbyJ0+Xd68Ks\nkx+mNgmJQy+8CAEn+B2AAf5WJeuzwBuPnCK0J9AMcJQ9S0Lv27SGhd8QXbx4\nja2fZo+8P+bNsoNb10Whr1CcZxVY5VLpU50nVnNZgZmaUTZGqqjlgckLr3js\nsRvEvce9MkjED8JCN+00M0dRH6UpD+VTOjlaEXa1zVpWIiXUzyGjGifSy/8w\n6ANYZJJXEnAFA58zNO1dnQteRPJjno7Gte+uiz6o2F0AI2FhhayBrTxAN63Y\nRX7NN6eds+pk6KnoBgieroyb9E41iTbqTIcK5YG8toGNyBuJyBVf6VXsg2Bb\na1tLYm50gc87nbL4er/TGyqYAjLXBg8OSFNyU1oil7QVEW6tYtVhqBI8JekE\nM1Sv\r\n=5UGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAInbcZ7djaArOI3czcz4+sb5pPcck3/TcjMafbVdwW2AiEA9PLQ+GOG4tybkRY6BwS1Fpu11yvnVSnmAPQibNzEGQ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.fd8360b4.0_1624648167223_0.21397487828884754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.6f74432f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","@material/mwc-tab-indicator":"0.22.0-canary.6f74432f.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.6f74432f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0R4a7/85ATQ7Tc7/5o8xVULVjl0jO7/V7oK6dSMLVtTSbmIr+5adyps4Jo5RiHGM1Xtq5WJ7P/j3oWkyy1kc4g==","shasum":"5065486fbb8e2156e8e090dbd0d0a2b1d24a702c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDVCRA9TVsSAnZWagAAOfoP/22wZmHpF1sJDvGvOtjy\ng7MMl3UqOCRwsi3UH7bWq2cGZZrBJvZHIFNtIbTg43L1gqtYgf29n+Ipdndt\npB+x8ZsUYsYTfw7mlyqz6aA87m2bICFtT7kGoFjAHivAK/FPQdt2zkTsnYbM\nvL9OBS/TkEEOV9rR0BPQ/S1Ma6N5nu+40Sglp7l993+N/u8J9leB23nqQRFN\nYTgdAz1BEC/Qn7gOQqugKx6hjYQS08DYeepgb90AZLR5UxN9nCkBel6kglFO\n6U1fxNCZ4iD1UuoSlbVdytqw0LHe1L2GUCxkYY5Qs6/mkwzZpKewzjAWAYnR\n8l5H7q9I8xWYvOXPBM2+sK1rY5KmWYYEmIAN3faLBagbaU8RwJiKLx0DelRZ\n0nLORXKR2afViPhJMtllQ4um6dzKK5kM+WQ8NGKYhhbDMtOtiuWtBnfYQ1DR\nOVGoGqND2nMrl4MUkmPAL7Jh82jlSUDOps5atlaJ1/bSFW9RpNKTLE7NnhhZ\n/oF8gLFaddJEv4/HjJpfkgEKXBlSobtLIqRAPqDbvQe3NfyADc0wl4Rnp/b9\nopcVTlJzQeil5VwU0kM1hJ32DxxpVy9mydY44rTStErng9OaniFwyizlB3BB\n5/iXo/Gd1Z58x1p8EMSoeXG6DhK9NtspkXvkvJXDES4zcl7H++drqPS1RHgB\nZnAk\r\n=ISrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgi9j4+VESONMxlC9daoWVMihqhU6TbWopOwJG9SSByQIhAP3BArY5vxZC+DlFjcR1iZlG20qoL0+puXgu85TUzk3J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.6f74432f.0_1624654037308_0.3144955832913774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.b62f901d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","@material/mwc-tab-indicator":"0.22.0-canary.b62f901d.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.b62f901d.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Szr4Vwn8mxo6h+Akkb4xX6+68pUGOP9XZ9BpsqPtaq1Je/QoRw35kYDoPxsnqGOXUbi5hWP1wzvIYJ6zS7+tBQ==","shasum":"2b7e55376102df7097217f475f79b5cf2507244c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lX7CRA9TVsSAnZWagAABTwP/0AJSk/wyXrx07au35qv\nA7TmGc5tmd1HZFLIoqZgivA6BDJrYj4NrSKJVP/bAGnCPnccVRc4VanXTP4t\nYstZpTjGEqcoJwChOmiP1eZvUmLz8iZHkfTFb7DiChFDzBZOtv+cUKiFLU6k\nEJFUUaURVHn3M4gIGap6SIV9PWX5tZyUf1Ma0JwA2Gv290UDAVrbrAhGTzSI\nz7YAe24SYgIGkvQrt+91OR1WXXHdxqYQ/uYe1YRlfPWoktPn6LbIXxI2zAPe\nV1ankPwfxilGQS21cPxhxvWY/2OqELFurLtS3pd2BJ+c/ydorbaVdjNRIvaM\nA12lU3M5LeSko7FiIOLGLlb8l/S11D/D8e1huLbV9oew3/NTlWXQdIguE0Ml\nNtQdepzCue6Az6Ad/sPZ+pWbIInIABPu7XXceh6MMQl84kPWNXy4L5yFRdnH\nSIqfuuzSCgI3r0GDS4sKHLKGW7f/1YFeRomatsqvjOHJcVkIvbCVWkuhh1V5\n9BqQJZm6S+XA+PSLlmFe59NQyJan2RbV0/ejF8GTXssgBRGtbKXxaxc21Kcm\n61ZL9oFtdj8/PpWz0c3nIQ6+Oz4fYvMlZ5vOax9bEPDf0tNG4fD4CW7fSvo9\nyXhhOH944TJnQolbgOUCL/0sn8y8gWT8ZLIaBKZrM8MsVA63/dp0v+1GLSVb\nV9gu\r\n=2GDd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHB30oOL53r9XLeoZVBvF4HKuhur8R8R2oHG5sg9O3QRAiEA5KR4aaSfYG5aRwIRTWYduUmcFj3ngGZYBvOn3M14H6U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.b62f901d.0_1624659451181_0.17350982242264767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.73122cba.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","@material/mwc-tab-indicator":"0.22.0-canary.73122cba.0","@material/tab":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.73122cba.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NPXkzV8GjKSa9vJIWqOh6oKVRjfAfQ9FYXWMQnZdFq2rlXmNRQDjzzi82OcFC/3wKcdAAdbzezWXmYf0Af66Nw==","shasum":"3d0f3f0ff45a6ed3e4c4acaebbd04caa1a2a861c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfjCRA9TVsSAnZWagAApc0P/1Ludf6F+PVxIkaZ4GyM\ng1TGHFP9H71qbTZ70AoR4gH8apaAEwZRS3jSnib1Iqih+1w9IBgpBM7/KLLr\nE7yjfv9BnQsL9N1T6VRIcBolsieFS+emNZunD/DmLeLfQ68xO0TINPmNqft4\nQs68vmmRHM9j+l2AD+gumbyKw1/XQJKKotRlgySBPcHyxcNAyG1KQT/fL90N\nPseiT7WFLZ2acByCWn23fu108ms0BH0v+xnyF/Qps03ir0JMOgNZqotNhaVG\nT+bcNitjmJbXHyfi0hrkP5wAFlBVtzRuoCT8bpnk6sEEjp7HJTBG/tZOAJ02\n951k/yC0v/SWkmWEQkALEya4zplmdJKDMcpefoQQXc8TDk98oMysCtfrUSlA\nRaSbLxHs9IUKj4fEPafpRHPg4ax74aFSM7O3bEL9ojymY2p/CRWkPXx/x8Dc\nCtv21iUi9eJmJcs73m4le5WbSYYi61W/5ylwGa0cpw1tG5xEAOI/yb51cvzT\nnXTB1Q4PRNTWPhEApUm22/GhVrrC8oxgdF93xQ6JXlvouE3PMBr4Aoq7AIx3\nxKAFAQdglsLvtmBwKwrd5uuWQOQpYNM4QbD2VajzE7dHriOs2flvZhWGyQd+\nc/cNSJBRras0+KBw20FQF+W/UeWg9JAPZ4lYxF0Zj+3nlYw5+eA7Ri0r+OTr\nusEA\r\n=/Z1o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA82o7JoOJzC/9Y8R8i4tcSRW7kfzc59eFSj261yL04gAiEAjSl5jGMFAqa7FT2kSZByNKPTo+h3XoRnuU+VmyCVaEU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.73122cba.0_1625081826637_0.4926197025057355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.a6912af5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","@material/mwc-tab-indicator":"0.22.0-canary.a6912af5.0","@material/tab":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.a6912af5.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GgeNDYDLbCaHlQIeYJ2zfy3dN1Ymb5GtJgS96vCNsUeu9++h6VB7H3n72spMOs1ui1anJMrh8g0+AWmJzD/o0A==","shasum":"6a2db3209e7126d20e6c68f7103041153f5ffcdd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTbCRA9TVsSAnZWagAAL70QAJTWZ3PhTlyP8ZHFK6ZN\n7MSfE4VnTi+9ZWQpPkiOZn5QIcVDESw1McAuFCqXLqY7QMMvciadom8gTv5Q\n+iB8um29srVhrhdFtngjS+s8p5kpTsniQvZ1tQcsoHiT8EJxZjUdJimXLalT\nc1y/5qtE79Md63O0hUtEvS5yZA0U2MemROPhSjcOih0UWZakfUaBI42xy8LJ\nSNGULT7i9L7OtR7S7TEoNdFkib2r4aLI68iXarj4KCcASGN1ALBB7FEbR1nl\nRpikUGXJmgM9L1UTloU0aTSUCr7+F94UXUKag0ll8PyKkhDwdCiM04f5qjop\nGVs2QzVIVM29a62HAxjgvtsStr3b7zXPasud/JIY2tYwpiuUGE7YMh6tdGiF\nEc4mmZsoE2l+2q3cNtFazq/Cx0WsPDBOGjkGlVAI9Ucg0dwOcAhZNNcrkyFS\ni9av9lMZMjf15MAe99Kw/2xuJfPzO+u1WtrNK6Es3t2W0CAAHR7f488dYzaC\noKPQpxtbvhS1l2PrUn7ojIzTKqtWbyqO2KcDx8iPY/LBxbPoB2JUj4BHBr8+\natL0Zdgf6FJXFCaWjbrtMgXLhJr1MdV1UpGffFqKCwwSLKn8vsjJ2miHqhkU\nuYrxdLQk3U+6zBziCcUDKFgLBxKSKVaBrs4s1T0lP7yjXOQBUr2uRknFRBSq\ndVqX\r\n=iMHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDiw/y972BBXRMNXG9x0MFCLrqD+ZmP8trC5Xrq/yit/AiAifacPvJFaM6HlHJFNGRQzwZUi8SDYNiUa3pTfyDvDTg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.a6912af5.0_1625175258766_0.0009808214471327403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.134f24bf.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","@material/mwc-tab-indicator":"0.22.0-canary.134f24bf.0","@material/tab":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.134f24bf.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MlHLq/3tOQxjE+A3rs1Os7GWkDbZ+tKMm0G+zf0x5f3z/uJw1JVu7rB0PEC2v3af3Ejnvnuc4aLE3U2mv/y2sw==","shasum":"af3aa24c784fc7d2d42424b974a23c32e8774767","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKECRA9TVsSAnZWagAA870P/1sCkDoX+7XO4UibCAKz\n8afgLsCY5Lybk31ykCP2VpVjV9DyfEQK+7/ktNndPDS7FXN6zrKUNyFCc/te\ndJI+ApWTU5u52t/tp+DZ7gpuxSvxdF5TAWzmVghZtRSnT0T6D0ZTh36eqBdX\n+fLNT9VQWDjQJCwaB2oLWwLbeYwkX4CEEUytzkOb+his6kMV/xT+ecMGyJ34\nEoYqNfphmaBZy4jzE9Y4J9GN2EzluU92jEg2cUWTvAf9z/AFiuDX0h1R3cJQ\nvaoyAvzv3V5znsx2PD6nRIg59iq0MBk+pZ7ooyoZ8XGK2/RIyHD0SgMw3yo3\n6nwp4unj7SMlTVLsAMASbqoraVV/3a/UBWamj5+6Rp0W8K4p4JTVX0ZjdOC5\nElozpznHrLZKwRpgynmNgYMb/4sK+GpITCQTZdX8FlXMWyzs/bpVHU7M8fck\nYFM67VXAw6sRESyF0yrNtXe895tMP0ulCi8NoXktctPTnheIJnqEfoglAnx7\nW7DfdkzVLjSdFead/wlMEhurz4iGWYIhiMWV52onblEb71PFyDUC++yvbsmn\nPSstnPLqZ2LVPjMpMc6Wxc4dEhQ6VWi93uBQZ1esFuzNGZ+nRR0LGrwixQQE\nudz17zedY5P3WWD0tFKvyciu8/9o5JkZbgn7RdEMJ0N2pLzEghx1TDlouYm4\nv5kj\r\n=p3oJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOZF+ZPlZWi+3DFycf/VMULD3vQ3hwoZwLteAh5nOxSQIgR0PmyAvJwnta3YGGKlRtCKmLg2XMdN0F46menrhR8ZQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.134f24bf.0_1625178756432_0.0829795905552071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.1debb78f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","@material/mwc-tab-indicator":"0.22.0-canary.1debb78f.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.1debb78f.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SrQJ1mS4IASk5cMfDxHeec8eSEd9wtwtehWWhzH98eFscHtCP15oV6An68Z0pZx3OSgYQLOpBF4WnNOO44XAiA==","shasum":"4498522c131f604b4dc01a3ea414084e7939dbfa","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlyCRA9TVsSAnZWagAAYBYQAJ9/cYaqpEO/JD7Lh877\nCx8m1cW/lEF7IfEIVy6l8RQyBs0ndL3aNf/x3SOTOOAU2SBII9APunSbBUQL\nr0H87yhppMW9CA5MDSZubxiFBIC4R3GF5Fn2HPO9FeKtzvtt/mEnHXV535GY\nxQqUoNBDKSRAcCAVQ1a5B+s1g9/d248eOnD4Sy0UvUTFDiGYGg0RhRv4wLzF\nP/tbKHKNeMWDNJzt9TdPaelY6VPXAwf3PNRR5glRTKANRg5I7p80itsRYYQt\noIbEdIq/tSgIcyIKUt0cJXdMbrdttLZXZMTqLMh411/0NLMB40fUC5xjOgXI\nCH3WM9kJ6kgm1hzdtdAiDiwcVhx3km4vfkOfNrZnTalwAFqkO7v7jHGsnRxw\nzT/rDbdkQOOPa+qXoQ/jtIukXQe3+gaRYKqmyFa7x72Qu4mwAUU46OSOD0jr\n2lzYHXE93+yTM8yyfLovA1znTKjIwOe9BR270O1XjBlqcBWjQL2qvU1jYcIC\n6CE7MFvIj/WEb/5sZGdzd/ZyAN6MHg08OyODeqosj/lhiFQ6LG2oT2tbDpp1\nv255PVm14/ZDDvRY3BFmdZT04E1k3HWJlz4URMd8LXli4daxoxau/xipPxW0\nQHwU/sMGJVy/cMeZB+SOrmaQrPhtGaeKlhWz27YDS4wJ/L06ONjeSCNMM/ZV\nXB/I\r\n=WVbc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuwloVYSe/xO3OhUxbowibM1xf16Z4Q9AQx/pmTfyB4AiEAnEEprKNIfvvNPU/QhtWVNO1wjYMWWvxjSEYqQp23IvE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.1debb78f.0_1625618802307_0.33071277881419814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.d53edeb6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","@material/mwc-tab-indicator":"0.22.0-canary.d53edeb6.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.d53edeb6.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-56I8JOPc+2pgWYOXKZaZv3q4GqTeWv/wrZSjiM3q6hdYowZqQ8B3OQqci2YDRW44ox3WEubjmH9JDwS3pnakww==","shasum":"24f92fbdfa6e29719b6ee9586a04c174aba4a52b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2uCRA9TVsSAnZWagAA7P8P/i1+/9oCyCrKuMs1Cz6k\nmrQukDZ5wRjZvYNteGEuLhEkM9uwzXVXm5Db16bFrpGx+OnCfs+Hc8N5Mm3g\nnkoqo47ZWY2ZNv62HAoWZqIHgT6ayqV/xZmKYM9bt3mH/g9MQUL5YcJY4dC4\nmDpxS8hZ9KAvdFBZhiXHP4ZdqPDKQrO5aQ84TglraZAQ6jlJwvCy1YVQufSq\nSoTllvSW35EBm6h63t0V7dNEWqDxFokf1bRyQexpczeSCJHceChf42gFrDxq\nC9APCqRnLl4DxHVfBwUMxsxJoKlA1WGN1tRqkd6OQB+fENjL20S8X/UuOPyc\nxey/4+A22hvF8k9nY7P+ZPBvdc93X6EdC7nPpUn4B05N3/qrWkl8itseE7qm\nZRGwcT8PK8V71bSqaUuW+RxxgFQzUWh3wfJOhTWjkI4ZOlC+bzx+bVlAku42\nhjCl0SP4vLMV2eAIFPPAHjfS8b7hVn58CLdAhC8/A5jHeqywMGZBPPZPUs4Y\ndzbdUMI4Y1wzNiK6Ub4h0mSM8YhjR+nwUIi8Y9K+QORfZizuIIQrTSlBrLqt\nMLruwd6okQNWIU5F4dH7fjjoIVBaz9l79u90Cgopkto5LL7gaIGBSP3x6v1X\nHfL0RhVPZ+o04yxL0Cr2XloIL6wpgIf4jqHTYF2liLgqlZMJG06MLoo56msM\nTztQ\r\n=DfX3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuZIXmg+sLX4D3mYznfrMbrSfaylPrgiK1vt8AI41lDAiBKywWJYuH/Bjvk4n/QoO58HBd+1Cv4GkMEdr4R9Ac7zA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.d53edeb6.0_1625677230057_0.9253363212793844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.2226489a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","@material/mwc-tab-indicator":"0.22.0-canary.2226489a.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.2226489a.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gGPaNqwcXqXTYdOnVCPmYwFfHhaUBjJK31LIbet+Qn03ACXBmzBYO1AJqKvz1jCfvb/TU7hrnic7rMADQQl1Ng==","shasum":"86ab5147b3add3a9a01d776846db4dd4e175be76","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2MCRA9TVsSAnZWagAAgBkP/3YE4mxGcI8wVZDP5SXz\nVlWD6el4Ah9fvf21cthJeSMpv491JR6XC1L2Tl3Q8zEFsJMnbsbQakrN0QYz\n1BOdDPJ0Tk0WAktbRKOboO60tzwu73ivXtKBVzhLXJriLvKCZaC1oM5z/Qb1\n87NQm1SThTjDqHgUX9RbN8SSsa9OSx0rdshp8Xd5S1ntrblKePALnbbMbyT6\nTn2XOihDxmfArud0vztXKxDZy8QR/U2JvrM/xln1GwQVHjDXZ+bNPYGrJQPK\nQk33bvMHzdhdaZ1MkQ693ApZLV5cz118hax33cp+EgvAKpaPZJPkCGYBhyv4\nwcnF8iwX888joVRMOpyPLFPVHrrHA2UjcysxL1Q9TjlKojaSvmQclhAe0/2u\nC2uEiZzwyDOFPZHhNxNO0n6fnT2DrKM4C2EHFY0yCxalReA7BwCBzcOV+CHC\nUixQZDUVN7S9CEYFXYtdE7zniRq8S/rI5HZm8fb7cxjhSkYpsIaeGTA7aCIu\nPZVm/5VJsHziKxmz0INL3aFTq+AD/xklhad+qk5NodcpUgiD1txb1EyYWhgF\nbbbckvFLo9ffUM5ZxxLlwCloeXVzS8J168JBmXoQq7HLDoGbUZbN4R+/al/b\n/QAa12xdGM2+7lxUpjfFOo2sWDijpzv7SRD0TykXCbuAqf8dmQw3/UtCVLQi\nDsjT\r\n=3qUt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWIz/RVjHQbQlG5MOaU05DwEZPI5ez5qzznDkiSfSX8AiBvj6O6+lBBWtyQEMcQGNXr8dfOAUSkd0WihgIUbSezaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.2226489a.0_1625767308226_0.4318115894411092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.d4801c11.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","@material/mwc-tab-indicator":"0.22.0-canary.d4801c11.0","@material/tab":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.d4801c11.0","@material/ripple":"=12.0.0-canary.adeac0549.0","@material/rtl":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w6J13aP52svAJL2lrSQAPb0fpw/RGEpicUH9R016ewYNJrYZJMhgRQ6iIMLFRcUse7tY22bRdECPG+pskFKb3A==","shasum":"e9463e5692c3abfccfa5d888819d3335bca76a02","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51n2CRA9TVsSAnZWagAApPoQAIjC9j0LKRCYPJfru4aA\nUrFeeesUSzve0bpD2ygxnnt1p60QN2ILaK9TX2K9cm5xDiPIR+Ps7empsqAC\nW1U6ouxcK6zWdYzyW+3y2OJoUJ+VQX7CaHGOgIiVL6o4gShLUiXi4Mk5vx2M\n5X5xW3wi0Haa0o+VEyp5xDY5HibHW4RcD6JgSCZIjEaVJLrvM25NYA6tP3WS\nRE35H662xAk01ou7mde0dA9WJn3ium/OZwATjrDILGTXAFR52KzqUhk2u35o\n7JJ5ay0MHSmoOGIVwYuoEHGRVU6ofQBVftC/xbAjCnBBrFCxk348Kkxgjhs7\nvUyd5ouIUF4o8m+9eltrwd6KHCpnMeAIdeySEd4bdq63b0sXlOzg66jM6Me+\nLsX2mI5tdc14PCvPXSkJUfurQGifQiJOUAkF4hB6bB739//ylH4pb6LqKX1M\nWA5uMQxnSTwcIxTcVQzTv6BqFG46wFI1xgpaqA7hjOhWoSEEUlSYHxzCBdnL\n2GlaACjVfSiamF61e12MkiSdvCcHFD/UdKXpNhfJoOXooRedBSzf9IM2BYz+\nyWHqjJJx1gUiRhOWQGsY6llzAV1XwNHCtQgBR57Goqv94Slb8HloQeRvb2RR\nRdBnJENlo2wwlpUWiM6c14jXtvW+fWwXUjyg3OUypiD4tYZBXRtj3mjLWwb7\n+TmG\r\n=ucss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZW65pqh4z5xmgdSvt4u2euVleSa8gohWG+7uxMFJ2RgIhAN5oYXl9gqNnoYQ6flMmgkL/xG1dGtpu5MVHCJURtHCQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.d4801c11.0_1625774582147_0.7265283670131253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","@material/mwc-tab-indicator":"0.22.0-canary.7ec5f2d6.0","@material/tab":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.7ec5f2d6.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w+6w2a61+Ihvc0LtddZpMoKyiPZ3rkjW0cuMCoGnh5bL3w0kMizoP6THLoimxNt4ie9QD3uwiI+HaK+QO6Qkhg==","shasum":"5c90a834449730ce07552e368fb07a18443eb57f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkTCRA9TVsSAnZWagAAviUP/Az0FWyKmHMgHUclaQ2T\nWl/Z22N27HAqXc5EIFdtMGwN9r0moWvMw5Cw1HQDEso06GB5zjC64uWfzitg\nDr1CNiXUviPxBtQru05SHpfgDGKSSA+NuyIdoOFq6Bhkck7wGWj0+gHf/hQv\nnKGyQl7PrGbRYLBAX3s/WffLSVSyryrrFOmuTRVUxYTto02tpjfCdI4rhBPH\nq/Slymlnc26d2Fan4804PVFnz/ynlkxfrczOo9ASqOlYLZ/nmdP9DwSGaZae\nmeNrGaSI63muu0WKsnrVS2w8wXKuO66gi157Y0zP/xXzcuzIwuMmIATvj+Tf\nkWzzKKD7mHG+xZBPgpuerIAPwyIyFxXP9Axhzl9MornpYMQ8DwU/THYbvXUQ\n59qHtKaTdN8A1liTk4MO5QNYgF5Jxwojwr3AzMu1+jQOzu9q2kwBWDfyptla\nMU9WBA5d3rZsyOCLghzxBcSQpgJ4mdxfzBP9oMyXyoQe+SAxtL8nhurjAGcV\nH+VtfqUuSqqydhcE8bj1wA9HaGbTnQ2saOUsqMv81XeSu78WARXid2SSBTNu\nYXrdlBFOkbyD2K2rfXZ2kzQjL6KNkEE+XScqQ3rCtdEJjRYWpbTrmGSOGNTD\ncKXFJW+qxPDtTxrMHWCSNW3Uv3/DFXDLN56uVqPvnsIVrApH1VaNXYkBn1rS\nzLC4\r\n=7zJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEb5qpA4/zTeRPrT4isarmB7arDimggU76lZFtEq0woCAiEArNtVxaehOBB5vVdzNeifkJb4Nc/ifmKwMMhYMkrjVvo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.7ec5f2d6.0_1626110226835_0.06176499059697593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","@material/mwc-tab-indicator":"0.22.0-canary.86cb4ca7.0","@material/tab":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.86cb4ca7.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zb2zR9j97/UXQCNCgEVioYTDlhX4i2Ydjlr02n1pCfowoF4a0ea5ZZ62RLDV1uyGUDf5OQltVptJi5F75QZt7w==","shasum":"0945c595ee05114c19ebc9a05113c3f1dc8aebe8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9yCRA9TVsSAnZWagAAFkcP/13lGoEZdwGiym7h9d7u\nDZkz1V1b6y0ugpnzajeicJz5zoqrmmRudB9K1Thc2CEMUQBKCuKcSQY5ERu9\ntRKC56jP9sWI2s3twtvJG0b4qoAeGE8Z15OH8uEkBJlefheTWiT0EMPQD6/W\nB5KPCchR6p67ebNmjzBD1TjsEvVbfiMNRT6/MQGHU3z2gqYOA8BCr44A4woI\nMsjtjx1fYD/WdpUfFMQiwwSpZaaUiCEjHe/QjUFfFSMDZPERkdd3FTF8xcG1\ncV0wuFKOZfw1wBMYmEO81ihNFrBlqgciO8Lqbam2efR9FykfA7loHaVWvZ/G\nsOLsOiE4eeW7Ns65TKXijnURMgp0u1q6/3Vq7m61hPR86bacQWSpYhfbeixN\nY+KI8Vso13DIQpNY0BvmuipVuEB64+A+JA7e5H48ONMC7CwrXvGSQizb9Bc6\nWHS4zWnVdi1g+Ldu029jToNLBgubFR8ho8F5h6FVFNQQgs/qlQpWkvWnYr4M\n48EVKvMaSRYeqT1xultRQ0W4FzzgRklc8WTFbGg2bK1YqYlx+c1OllIIW6BW\nrGyNPJ0R8NG1hiOzJdJPdNpejqgShCOVr8O+jRl4bA0zwH6Peuh0KVaA30uh\nsU7wfUBCgOvwzcJbpoWi444UpVYeVr7QntNxcAC2dgBD+fZOUtoxpNRm8p7+\nZsrQ\r\n=K89/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASdZLtm9XbV3m1NAUnnD1hoR4sZZOGhcrJrK1Mfntc4AiEA+Ec/9W8GWzvz+ewYheSrwddM/OQlywk05pwYOcKJgZk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.86cb4ca7.0_1626197874528_0.5380166987880286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.bc9a724e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","@material/mwc-tab-indicator":"0.22.0-canary.bc9a724e.0","@material/tab":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.bc9a724e.0","@material/ripple":"=12.0.0-canary.ea77795b1.0","@material/rtl":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U/65UzQxHd5vUOt4gVbsGxRyiIPJdBEH7AeaQRX0Bg9EJrLlRXuYVBMKyiCp4D8tOUzooq6XWUojrVFKgHT6Aw==","shasum":"2ea12f3f3957d8a83f41d6ffede3514aafe8d091","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6NCRA9TVsSAnZWagAArIcP/jLsLb/zvJghkiDTBjPf\nUk9R6VO41isJoq/Km/bfQTKC3/dgo9r0vjVkt49FVc6LUpmu+jexGcF3uu5u\nnYctW1Vbw6huxz3js/JIbAe1rtzLWAbNkMh+Vjecogd1Rwjjcv6bOOvERPy5\nufiX/D/AW8MAVWaQ7BoNG3oT5gZjMkYmBKj9zyKLeZ4+k8nZnvOFbD/5nsGJ\nzitww6FxbC9eNmb3wAm48e0yeTlbskwMoRlLIPSPFNF3s+iOwGr24apQiBo1\nESe/JwcsXzNhi7hQq2OlyE1E+h0Y914502kioOVBqBBnGHEmUoyuPRMA3g0+\nqhrznT0Fuw5UQtGYuGwj2BiRqQp/c6Ym4MYi/rBH1yVXGyStuu+iOBxze5nG\nSmA24R1vNwHnC/P53v7iv7lGXeS/q2ZVKe6xw+ljF0Muik5pbX9xJxiacgfe\nE3jqd8IB+Ahg9M7OTavrmySsPWjnwtKBuzgXCngl45mNASG2Syt5IpP6Wnqi\n9qi9L+bKV/Wjx2O11xpmFscRRTYrZ3b1jAuphpuKfh5sJ/2uGdpybi3z4TxW\npFMAdcvg+0f8u5+sjpDFndbAROa6i/EoboIu6ern0UcRqU8Qmdqrr6xGjK+b\np8CUfGfDqRCnI8s21DypDJbIwjpQeC0QVV6anu2XqItLJESnyYDXxbKdjoCS\n2JAG\r\n=Gd63\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHcD+7Fcb4aSYBgrBAs8lvYPxHzw4OCNwiBd1BpAAtqAiA4ESrgEJPguuBkqS1tG053+JJVkbVVRBTSgKebjJMIgQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.bc9a724e.0_1626201740932_0.5766718491943006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.7847b83a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","@material/mwc-tab-indicator":"0.22.0-canary.7847b83a.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.7847b83a.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DgjYW4LCNrKwhZ9LQlczOeqhqwg4wLmb43+pI0fz8n4G1YpQh69Ylkbjds03hnuxHZLA/DJanZsR+yxJhnBbrw==","shasum":"e2246e085a24a7a385e1cc0c3bb73eaff6b6706a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xyACRA9TVsSAnZWagAAPQkQAIOyjtnGcs5PjHBAKByV\nm9p62I5En5WRU06UOooz9D9PW/nSYb5857qwxeNiC2xw5q1njar/6spPyQ+S\nUZUmW3X7RSfBEXbbgjH9QQV+KmaPRQEk5rrhmfksnk1cIHpsqEEtCFXPIfl4\nTyQXgd1xj/VNOYeVwBCwxoWF4YAtWJVChtjkGP6Umbn6+WX9y/UP0/1vTUj/\nBAkDdsLrTNPRgmBjgfvhLPdnxjyuoCTNgDBkgom9T1kzgEowrJ/3pUaFBj3E\nBmYxdYdkArvJaHMTGphhKEPTFCdpOT8mVSW36/YOovLtz4lR4aKauCmkpFUo\nkGZkmaXiKiMbp0hWb9Z4bLXjtSuqkBUHhqkw5a/n1iI+DaYtgKvuZjZeyqCq\naPobPe0XQsyurNg7yyjNN+mfjVzqzkebG5mIUtCwmvkUpdY67J1GhulyNQ99\no1F5DjMbHDgT1+kH22zlmjvAx8nT2r2dA9amgmcVKi4I2fMVAt677sZAtYbf\nI/2X3ohJ5eYth9L2gk2rJrOXJRfpJHPCDpx5QsvTCYjGA5/rH79mCjIxHOin\nR+sZ4Ik4hkVfuE6UJXDyBj8Xaw7khqZqGlekyGG9KW1ooc/83rYRD53QaVF/\ne7Zdh/OohQW5KZzihI8ocw9/C6SiuRBiyIFelXN2h1aLjSMnkxE6mCYMGCWe\nffyT\r\n=x5mI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDip7OCFyS5gx66Ic9M02MPuB0gF77rGxdfWynr7UUIpQIhANrzbt/VgCSL+qVQuWl7sY/bui91Cc44ecvgUUsD908Y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.7847b83a.0_1626283136229_0.2892630174797963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-tab","version":"0.22.0-canary.8cba18fa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","@material/mwc-tab-indicator":"0.22.0-canary.8cba18fa.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.22.0-canary.8cba18fa.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aDsCBPrN/pkLYIq/BxtBJkI1fqrv5msBmB7Ss1wcIo9bQP3vcQrAUJe3KsZQAcsvy9yjnk/UUblFgbAK5P6h6w==","shasum":"d09e0022b2ce82f520f88514bd6fd46ecbe0cfa8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iOCRA9TVsSAnZWagAAJDkQAJ4ayQWjgvfvixuLLC8F\nYsPp8s6WaT6kQyk/eMc5gODr6S4PnE+rckvUhtjsi7xR89iTdN/rlByYxloD\nhm7ODHsFq3F3AUak5t21eJ7mVbEK7sx+bUzdacHCmMYJ6YS5L221Gwuo2VOd\ntKvNwYbK6mB0yD8lvLnB/DOdWfDxk0KmnsctkrTGJBq03PI6qWzcDiSZEh12\n8+/VPZGEkemN7pxwFckMBDoDsTV6hHPw+cAJ/S08Ru8+UlE6Xxr8DdCjxio9\npycMHKwD8ns4cZZRlVu7Bes7hHIFSAdsEClgHhyv/fXKicYk3hEzjBBhFS1N\n75vD+A81Jt54Q/TNZo+DwM/UkMsoeAg9TceqW2OT7ji3ugOuwA2Gnd/tQojQ\nVuZi8ZLRBZoGYMK0lva9SuQtj2KlxFsPyFZ1gjw4E1uTryII5VOdC99Kb3vS\ndUg0brf6InCiP+S3P9vg3qL+9W8NHm/1BTHW1LpIurP5+WxsMymn5101vZyZ\nv3lxSNBLUzH6BVb1elN5x7OLDW0pTQozG302CEFJnudW9A3eLEtAXHEMptNK\nJAVL50oSahL8mdioYxBkGLU97bsWCog79BXZGle/HffQWDZhH6rIDfWQeszV\n4PiuAsmZDYlQJQcsbr+E3nGyTM38Ll6KpUHkxXt5hDY/H+Y4EKt1FFnbyOx0\nPwcg\r\n=iEkn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJrf1vs/vl3rGj78RVnwuP1iL6BPu1bKLNEXOuifVL2gIgWHd5SJRMNZHtaLd9kklMiQfmSq9gVgCuu/WFTC9x050="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.22.0-canary.8cba18fa.0_1626294413652_0.16105571812621933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-tab","version":"0.22.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/mwc-ripple":"^0.22.0","@material/mwc-tab-indicator":"^0.22.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.22.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-ANqm98OVpY1DNcZtP3/cRgUqfccbzRo8VhXNG53Oa8/mZPlfDbtkpVOMm50Hrjqcfg6y/adCoirfgN5g3Ze1Tg==","shasum":"e830a658b3f911908935e06660daf73ea2b65ace","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.0.tgz","fileCount":13,"unpackedSize":62057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAm6oP/0a36V1yaiX34q8m6z3l\nTab0v0MTKm+GSIq4sCYfwm8ZL3nUhz/bWQNhKH/A+8lTg5KfZePd/EblKAVl\nt474W8zpqaIAg/23CZhcgTvN7RtBZs65UyhU4iLrQSiyPCY2AzLJ3t9Ianjt\nV2r50jSAQWfiT6xgutGIZU4XLb+sqo//qtgeZfm2lg1kKjGuMEtSuw/qiLuK\npyP6ODR5E3bB4WRy0PpYKgZewjjpbj1hPY06ESTvIUbC9Gx8ZpLj6ugRIYdx\ncvu5cASIoaNQxNr9DBrw3cvkkickreWxAYvh99S/fVnj7GpwKRbNKraSsXCf\n70rW3KnvaPIoKdqHQ9k0JWIet2wFFEmeLgm2hwn2YyBZMkwlQYIvY56au1MR\nORA99jOlgSbJ1z1qGhMXPryz2u4pdbz/ryMhx/rWGpu4cVAvlRfxWOjwQgO1\nelAKFoyH++LntzMDVq9zYOCkJJJUiiow77SFwIlFK2YF/R8a99RUi2VfccrQ\ngBXVFIpCZK/Pc9u3aPWxt3m68s6OEBtJ/2Ob3sKVBkOkf0KjwwJmtfdgTqKV\no1XfbYVcxQKmtfR7nkOTDTVPEnTAJ4sAZYTA8x4CPYDuPqH7a6YBAe/jqvnW\nONETwXGM8wskZBqAOFi4TopQ3XT8+JMfHd2qaXPxMWBbX3Z5gzpZozDWtgrq\nSt++\r\n=eB72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0URE9BkLKDu1wBDdvWUG1HWf+lLiagzX/mu/S2uvzHAiADFG28KZmqVl915g373d2fodZCnRQ/PJvUmYFROUksrA=="}]},"_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-tab_0.22.0_1626302335435_0.983216643550531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-tab","version":"0.22.1","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-ripple":"^0.22.1","@material/mwc-tab-indicator":"^0.22.1","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.22.1","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-sNPE8kRQEH04vEStxiidTjpyuHc+5Wm8+OVU8wrf6ChJa8KUV5bi2blWm6PW4rfQRo2Bs8AarDXv15t4wv3XWg==","shasum":"45c692cfbdaaab272b3ba8ed417b9fbd38c7ecc0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.22.1.tgz","fileCount":13,"unpackedSize":62057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAA/uIQAI2GxeOE8uCij4ATdyfV\n6Z/I7553ZI+F0OSTJl8NGiIhjlYXE6ca7fh1bpBoMzfCNb7TNfGJxm3gYIyN\nbWqDe7apnF7Ypc5d0XD/FkxKj4FXGaD7176iTlt9fKjTax/hEApV4Pn9O1hD\n+QzjPl7FCMs1tPSjfiBG1RWcLCCldEzhmhFKnhTXBQ/EmsuaRbz1c1B0yV5s\nBMU5Tsc6SFfccitISbrS6Xmr9GXALtgzAxfTfVe51S6GVVcMWkZdP4hHIZJG\n+vzYMX34NJueZsfjaD7B791bSqaln9o80UNKHDboGTx0ilM8TyQwGb8IU1B8\n3lyC8Qhz7Zl1CTkyh9/8g2UJjCOJWLsZ6SBB4bDOam9io2j988sTGNninSnQ\nj7UTDCYOmE3NNyRTBOVGeEKwrUJOsYr/V4/HORLDHepTV86FOWqGkAMggh6c\nPs3N7WO6L0G3m2lkVNTTV3irk7GDJ2iCAup4cIbI0Dd6RqjxNhcp3g7cusCO\ntirRg8Rhy3IgtCr8htIiYOmr+u0ZBeTgK8KWPShYNc0uNTxxHsGMKAmqLOEe\n6K9n3YQ8IvcwqPyVzCtAkXtGXH2axEUwakTOIuuJjUy4xkNWWmfI3ijXfpVx\nhbpYeAr+VzG2c/AReWINBk+eHaUtFk2mcK1wXZKQxBEQ/ibCUYpOtD2xW76s\n1BU/\r\n=tpwO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNWWA0K8mIduNJa37n4GXxK+Zl74Mox8icEQD7i8HrzQIhAIPFaLQY6Imj4FRaIOTtUbWOrCNdUCvMliFv7RqC108C"}]},"_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-tab_0.22.1_1626303173003_0.5140280657373728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","@material/mwc-tab-indicator":"0.23.0-canary.fbc09b4e.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.fbc09b4e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SIsR1bwfpw0ENQitkthUHu41bn3wEwL35txipkkSQCQ4Q9/huGDeDKB3BCWcMO0gqjyJRetZjE4JUoAcrVCE0g==","shasum":"4261cbd2ebc106e3248381e8a08676143e0740ef","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":62143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sfCRA9TVsSAnZWagAAxXQP/RerAfZG+kMZIGNVCOv6\niOsX+jDIuBhcGAmCII+MIJTG4h82wK7FI+dx/7DKZKbirIHICkbQSKuGcC31\n9Z50yqofpUCILuozlQKswWyNqAG/ImODHTr8pc+0GOwbMsDIkKGvfkyoBX1d\nOUUU8ZiZDb06CCPclKA+cGX6ybX/HUbQhuetxsIHcuAsz4HQ9YLTlsCLY4uS\nEeT+9wkA1MSj7SjkqcwB2Z/kOh1kM1yFK5Ps1P1olW7lTuTx9QyLsjOpD/Ep\nJrKf5unMFhnlH4ZJ5M4Hl0fxJHBqUGaQg8xXpw/0seGuKmtAw6NpvMZfevKY\n4Nr9jjr8uWaecqDeHO+SmLLdaxXP7XcLwcy/CfEzBoFXfrMFOl3NZeinHa0v\njisTRk3XJJD0Pcp2pbaD517O62cjYPmLcql4tiJuwQBYHjqU0RnxW8Qwflht\ndvqrCueR2eALAZco1JCRgDQiwEsq1Sd8l1WIi6WuiLfEicrXqaFj0vP4w5ge\npCEzU4j/8OMh5Ki6Qpa1olQSgsP0xCffVpxbLemt8N0gk6JQ5EU54Fqucipj\nzMbzZEx1vD1OhGzEvUTN9lx+o7rqRVFCr53RH/ldUXbE+8P69aDasCa61WJG\n9b0SAkO5TSBD4SbQj+UAlKnl6avela4CVuF42IerEo6ZqzmMGFeGUMfwfd6B\n8tmY\r\n=We60\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlEuJwB0VUP9maM8LcfJFKsE96ETshNbQEaR+QEIOEnAiEAxG6hELaDj9v/t246oHkIlD1SmxKaJhuV85wNgbbwiIg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.fbc09b4e.0_1626303262902_0.5039010409187961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.73e9f83c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","@material/mwc-tab-indicator":"0.23.0-canary.73e9f83c.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.73e9f83c.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QF++iqS27biViSQf6xNvEQHSJEuJX2ksF56rNlN7G0qE58ctWMqo0MIOC4x8vFfk5yuKBvs3E4jBv7dyhwoIJg==","shasum":"7f3d6737cac18e7c9323a7526b4d846076a421d7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.73e9f83c.0.tgz","fileCount":15,"unpackedSize":65385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0VCRA9TVsSAnZWagAA7gUP/R/cO7JX2iPENfK3TDQx\njGQuZkuQMZddo02LEKW7Miq1TsRlFfkFc15BDqjfN2nU0F8WfmUWBGIAXSd/\n9GpFCJ+Ir4FLOMX6MprSF5guF3UD5fA/UKQA5r1nyR1UJZGS4NGN1iE+3S1m\nM1P9opiaokDRIeLeTbucIAPrO66864wHFjAhdAb5nMLh43lbDgMpKsAWJO8p\nsCPdbfXBEkSm0P5oqG/cIaeBqocUIFrGCnC403iG8tImVjjkP9Bsw+nPmW43\n6dP+giR3YvgiueX5rFpIxsx/2bkKvTsEIJ6TNqhu8lIJx3pcczO5j0vwpp4y\nktgRcZAMjtuZpeZfdJaUg0yW0HxVlRqLJxSKYTCUkFuhcGOUIwb/jT1kWzBa\nZv+0gLnHAAjIOah5pDb79BIsPtJRMDsDrjY+XDkrLheBzTNyxPTu2YzwqLkZ\naGXTvz4DDYdvvm57LBgEnqLgD6sr6ytzUGtzcTRVRKqQrf0OJwXwYRFpKuWG\nxHAgKCNLNwWjKNW/HuQA8YHhcC9G8IpFNdP6MVAx5TWfKk4v2rA2T9pHwgKb\np7atCxwe0vmR+81mfwHui7M8gvqFqQyiPcQKKbMRiInsUJUJDBlggZx3PvSY\nUHH0jpwtH23TL8bnnahwO3aA28zs0vD+MrIwBZiJ4gp/NfG5SS66k/5qNaQU\njSNV\r\n=uP9l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICD3iBjjTy8eu6XXDT0K2WD2o7NLdBAquSwKB4VwCtjWAiBUuU4z7kSOJ3+pJ+V+8CC3nyCmXDUn86jES2mfQ1cXFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.73e9f83c.0_1626381589725_0.4403443205173472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","@material/mwc-tab-indicator":"0.23.0-canary.cc0aa7a9.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.cc0aa7a9.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HmxXWp7HKF0cuHx1S+nJn4kRHQ1Juc6trdfUeb2n8U1LOuE317wJjXQstPdjRjl486oiW9ztQaEqjAo36bVk0w==","shasum":"6cb56eb49c21eb5ad672b861812ad69d33973f25","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":15,"unpackedSize":65385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLDCRA9TVsSAnZWagAAPQAP/0bFy4Sb7TeNb3vjrjVD\n2EDL2qnx48K23+RNd4pzC3hg4v1ccYLh64gy3+64mHgo1SCVbvbITV4AYqA9\nF/+HCpwCfG9UUSbrSoPqcvNw0ZgV+CGhG8rZNZLFVayB3eef4x/ZXrE0UErr\nBrouKe6oocUMtskAAVBCLPq4OEVarPDdR1qwTCSFnEXpY9v42Dmu1bHV5PRA\n4JkvD2ME4qGdGPB4UJsj2JOAp7s9iAC9ZXM0Jukyv//INQ4IfMvpEHhG7ivY\nShTo0TzWXDV1M+Cpk5XZ4Sa0YgS2M3vFlJxGMYS5dHVXz3bZYATQnIZ4CEht\njfiXU3FcaILVvkncbQwkagepwEcH5xzRnzZkw+uUAuEh1ZObuzJd/IL1Fkjf\n9xvWxl0Ozbbdga1dCxDdyn7LBp9NYTVU8Ddpbg4tWjqIn/O9R+vdciOGKt7d\nvoDVxwCQldmrefPjTaRpGOEUfTH5ybvkZSqZOOEUB1EZ9/99WdO54ApPxazS\nMpcJLroZdzue9LCTXP/RRJq8P1ENgP4EV3nSC2sxjidvoTVDQ/oMujez0nG8\nN3s/cF+6CDom3RKqHjsUk5dPJ3gS29uJnWVYeaDz7++OAPVd3pOgZbdDFXK6\nPSYM9ZARThYRSmgrwwnzHt+JBRYON2itlKKdLrgHy3t6nazixsuW+7yg0WXv\n+VrE\r\n=5EyS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZp28kHJZyjBfsf9a4AkJU2WEKEypKhMhSLNqYNylynAiAkNh9Pubq+0Wx+bBA81kpEqNKnBudvCkWjr4yCV+/1NA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.cc0aa7a9.0_1626383043271_0.04374171341767541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.a8fcac45.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","@material/mwc-tab-indicator":"0.23.0-canary.a8fcac45.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.a8fcac45.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DbzMbpGHpgwk1UZe6JEiN7BwUP4DQgi1m+9CJndFf2h9zMLFjgNtMrgaEPXOjAUWwsySFOo6o9rChTkeCEZC4Q==","shasum":"1b5021695a0491bcb424e8bcf7823b8ac9b750d0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.a8fcac45.0.tgz","fileCount":15,"unpackedSize":65385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcuCRA9TVsSAnZWagAAxSMQAINLM1IF5QVvnNfS6o5O\nZ2dzjygQsGFkH4tChHxgU5kqI88w78RQNJKaNF2ivGQoM/EsuUR5oPye2k3o\n8uqcOTANgibydFeQOEvfSkOXH7XLwtwtLDvt2LkdzB1hCwPF6iriX6u3vN6j\nObCD8uSt5IHJgmsXUfN+MjGdrbBD/sKpVMTad9GXjcyyF7mC9sr0l4Jr77JM\n+ma0q25NIK6vLQs0Zq9q8ZrgQ4y+7DsBdKSsJiVG9AG7/bxDireE4ocI9sru\nRdlaHoGyO3ujgc+EiFmNaojajEO9lbzGwZdtt5sY1zmZpPavB8IfpuxojxlV\nnmo0tdx+vlinBvZRwHSNFuKOSPyDlj15ibCkmcoPteKVitf38wIVPOyz8aao\nvGahqE9RiESV64hAaoGypjmfbdjY4Hpkg1bL5tgLv8BsR+fDuuDBVqm1zAgX\nLQ5Dq3LyUBic7ZKKMx486yjDPtj6WOp5ihHpDCbqfG+XnKSitbpFhCxT/VDk\ntCO341Zr3sC1iSuOJ+c4cgeFcT1vWxoq75cRwJVG9YVEoxbzCC5eZHU+p2wj\n0Lf+9m/tKvhGHAnonCYr6KmiUM4anqAwdHQKym3iG8EExg9lIhxVdZ30uei8\n+tjJOzsOMi9sImpjy1hyMasX3tb3RL+1357/9D6Lx6wIIPw5egJ/YIg38fR4\nx/GV\r\n=2D89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdH9IXgP8LWjAYONXGjJLF1ZMKB2WoIYiS55jxNKqqkAiBVbn/YmRkbo7/jzhKjSYZf06m5BxN1Z6/62cMwEICbMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.a8fcac45.0_1626384174294_0.4117723326214078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.3ca580d1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","@material/mwc-tab-indicator":"0.23.0-canary.3ca580d1.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.3ca580d1.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HfnuGvFfWgASihxZDt+9ficRL6s9lpTStmv+kDKkjNLO92hDEtQKaBO21mWkaFV/kdzG9VQTRzmgc4dfx0Tfiw==","shasum":"1e2a9ddb4fc71e1d51da51304226dce0f109a3f2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.3ca580d1.0.tgz","fileCount":15,"unpackedSize":65385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDjCRA9TVsSAnZWagAACVgQAI80o+e85hjpGPWBOyhq\n0bzkziFNpNwgvkKnRUiYWuAlBvVoPqRVgJOmOdpNYXA1uxyIEsg453Sng/O6\nnWLvtLF+HhKerVUjYnxFvdAG9gws4gAkv37n+OdbPEpXHhhW3iEZM3V2gb8L\nZ/lPNm8yl5h984rECcR7kzuFFUq+DUVjGTQdPxqEtlw9NORQwPC1LHfk+zyi\nHfZWhxmy3D7hkxHn8vSVqPACPsqZGjgpttOv80t/MeZQxVv04bajA4IVLHK8\nT+uUNTiby9VVOFOpf+xVtT3SH/I37TaiA7EI0xub5y4gjtSqhewhKORCcPD5\nSU8eRFVYhYzi0ckxlmc130PYXD7Y8A5OfWHnUH5U7ySpaIzJeln+yCJlHUqh\neZ0a4Abr26KrbI32YM5qHPPXpIeofjDC3Kkizx56+IFneJDK+P8+RL/c+Le/\n53vneirsSGJ5CZhZyOJrOTg437R6ARCkQ4/00zw0K+wxiY8qO10Hkw+Aq8qD\nP0rI115k2f0dj+YqwBDLHlvuSv0UUz2ip24zgJkMOi7IMCSxpZhQA7POJV/4\nYQFmOW3uAWmIZ2qoiofLY71GXHds+IvM3TTMh6F//B9b7GSLpVuTo6HUrA2t\ndLhjB1KSdvH4A3FY9uK25MfcNq2fUnxz1niMouIWAQmfxOSdSPnhUHqZsP8+\n9rnz\r\n=J/PO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/OxEEdRiPc6LYsgaQPfCAdsl/++AV/JSDz0+0sFKgrQIhAPH7O6+OlZ6j/wMJYSnMLqobfukFV7+fMWFo2Wackw5l"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.3ca580d1.0_1626386659055_0.3798727564535742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","@material/mwc-tab-indicator":"0.23.0-canary.9e41cb2e.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.9e41cb2e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-M53AIplQcB62GNtPA4lfXl1KQE1z6V271L0ZUPXGyea9fqh1IDZFlxQJhoJ8+II1l1QUfF4cMn+pMt1AMEXfsw==","shasum":"52651d5b8c7254cd3261dba8d175bc029d2f1011","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.9e41cb2e.0.tgz","fileCount":15,"unpackedSize":65925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MATCRA9TVsSAnZWagAAoCQQAIREA/wAs8WLjtIqznOX\nzLqHooyxP9SPv4VLAa3UkPPoQPP+lUCMahXPdTTXT+AmSR4sSdZdZ808KtT+\nk9Cepc7o9WHD7gDdvuEDp/OK9hUsUsEjn+m4bBj2stqkMQeNEGWESS7midfB\n0TWKwRufFq8MI6Ra9g30aaND9oF/WGmgF0RIvGzQFBtBOFbB5MEkoIRg9YkC\nA7m8INP9nZcaFHPNytUhaskIkVeJg5lNg7ANu3Aq6oQrkb2XGF34z/3e6R3F\nkn+RTu5vqHcMpTzBPiHpTw5mkZ6aKKLXC0Tqg6MNcbUF1rowlu/A89hYcWeD\ndrtCbs/H6BnticUik3+9gl58Htcr1q3ZlQYcYj55qtEPq4tBzjRFnJhQFJOX\nriH/HCS0oCrpGks7O8k4z30dkQmlJ174U2O2WiSFc8AdAq4HZuZ/6Ml5wRjA\nKrLcTUjoBWo6e/rAtXZ45FUd2EeJ4WmBhk2HmP2DhESwwqHav0nRV3W49oHK\nDBvjr39oj4J2DVszS7G3iHEIAFVqAkujNA2E1KpAhR4CQyLg6LI6vX0UIv4W\noV/PGghP3gnAKqcdxm1wcVVOKWJlLhY3kLqxxmVmi3UWAFduBiRJYBt5pYWo\nm2axoHGXOwBl6M1RPAYgeiyDfkpoXzcT/SPtkbVPhbPpQH0QUN5Bcp8s6HBD\nF8F+\r\n=dwTF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoLo3AGnMDMj3HmvEicIYusE2UQXUNqE7JKzsHRQycnAiB9wYERtul1K7OhHxCXlKne3CNyAMxChE9NoWQkpvGGPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.9e41cb2e.0_1626390547531_0.9819090692943095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.c180db74.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","@material/mwc-tab-indicator":"0.23.0-canary.c180db74.0","@material/tab":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.c180db74.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GjWJRqnIKSG39RwnIVhMPPmdaINy69TJg/42FKPc28AdU0lXjc2z5o/Ln4sNwM/cZr6T76dQZu7VyS+GD4qpmA==","shasum":"1f282c91a34bab8de120124fb4642ca50f42114f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.c180db74.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cD8CRA9TVsSAnZWagAAitcQAIAiUpjpYNbdZxqxFxfH\nr+1s5C1DOp7z4BSO0KNmYZqJmrJDtVA473WgWui7nRUT3UG28KatWD4SDX1u\n9jlO7YcuWlm1qpf2w4CDtTszBzD/I6/i3dxxdSCGyL8YWpRL4E1EY+b+aOW3\n9E6Oo/CGvWLHs3YPWuWrhi5B7cmeDJuNsgNHDqxudMs+t7C6P94lFN/Nf5Jq\nIDMzkfLpCnyZov7j+5jmFzcOMO3KuxSwUvlbhFyBN7D4Pn1HeMNud1Oe/vA8\ng1929nbO/UxPIxmQ8Bz1hjlXpL5PWCP+B6fgQSaKCWq8c94CvKW9ONpRi/NN\n6iX5jB7Tsw8zTIdukOGz5v0wfLA7Qfzp9l6bROJfWWLuUJeOn2XCtRhA/8Dd\nS2N8Ze33UJGfJA/fey8K+RwA1Fpuq+0dr7EQYNTO/3BthJ6mKz24kcoah3/V\nZ0A4NIlYk5Bvg3jmaexRYQD3SqjR3kUSyYRwATV3dB4GT+BSnFSmhecSEr1t\nLWn4tSgj8g2nTrzIOsqTBhsuANRyoKdhqPe26xATG82RPByQaQpte3yk/IGF\nJv4zDxBygGKnMOTZ/TgOszdmxuXTxgJWGhkQ1xfcq0zjG5xlKxntdkc3LK0J\n+YTu5Bv3ZeXjU00S7ADQnSivQz0/vKKE6PExuk7g8F0zMbg4VDaBxM2Si7Av\nk2eL\r\n=jdDS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/TY+KnViMihpqNsv50zfatIDl/teF5Rprv8J9+ScQfAiBOxaiRmHh3m4bJCKnUgo9QNlrHBUe1jjqGj/KOhiOkKw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.c180db74.0_1626456316716_0.06014274712156631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.0d0a9267.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","@material/mwc-tab-indicator":"0.23.0-canary.0d0a9267.0","@material/tab":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.0d0a9267.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wRIIukkRzZSJYAlPBXLWNPou1iFzrN+9tlzPJdXBEMh5QTDN7gUG6Us7gCwtLOJagvJ6IbvZV78L7wPbBMBzHA==","shasum":"e2a53a524053cbb75b6e41e492775ad8eaefeae5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.0d0a9267.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciLCRA9TVsSAnZWagAAeRIP+gJ7o2OvvpgiQI+pWzdg\nqmLt1pXAfF/W5aC6G5DnM7kc0ljnovE0JT5cIpFu7XFBxocEVqptGkUc36oS\ntcAUqiuY7Ajuzufp2bFQvHptZSpcPwdBJoNKQ1C/1pGcJQRkCR15B5wSClNt\ns292fi6KAelyXv0XpeJz1f/H756gF8HyvxzH1ji0zb/nDrynPojL3HERnupf\nqXQ1cwA28l/xJAK9iNToLw0H2OcI9Oj0kXgHS4sFx4RwKaL4cPCWzqbLeHEs\nwrAyek2zrrlZq7opyfercDousYL9sd0BwZb5k67Fbx63e5PZ1ai513L/5ecm\nHzgNgp95vcfG6gDSwcLy/9Oig+yxDLuglqhj1/6lR9UELbrNqnl8upQ/WAPm\nABnyfbQnJKFyfaK3Ubr6ezZfGUKxKaG0PC41fQBhAnCq7GOeYE+DYqdPfRm+\nZ51mDvTpt0SUpAwd/fG+jGVZYg17DNH3Uk9FXG2Tql3TMbxxtlXcqHVLFQPD\n6Nz5OEWACZsEBobLO1u1MNZZt3OYcv8bYoVCHodjnE84IgD47tnXOOkInUdH\nR6whEg1s4IlLyc7EG4Jn98uVLkIif43RD0Wzz+Ec7FfQHiq3ibBu4MmB2ljP\nvO6Bd7+nEHPaAfFR9ct8WbYN84myWPhLsGcA9yYt6N1gXGhkhXOC/dnPo0Bl\nq9e/\r\n=Yx45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJmRRpfHOkouwcYehimQPSWImSHq3U8levFVyLD4HmDgIhAJn0iXAFQbaU6XvMl+k/xLnZwuV5i4On2lFgrMVoWBwy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.0d0a9267.0_1626458251558_0.3394777574717156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.d234ec3f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","@material/mwc-tab-indicator":"0.23.0-canary.d234ec3f.0","@material/tab":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.d234ec3f.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pgc2o7LiJ2TdAv8KedgEOGciWyfpHx4/vivCcYY72LScCF/R/ahEc8xpRgaqfTls7XXMSV3UNPVNhhKN2OXqjw==","shasum":"a773dd26563bd753f3ecd1cba11b8c03b3a32aaa","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.d234ec3f.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csDCRA9TVsSAnZWagAAthUQAIrpagXOio83YUOEkvQS\nW/ipvOY65qmZFaLmHn0JhJRgau2Na2YQpemFyl/ii8t1vUeL2bFlA/uYd0pw\n3e1ceMnKmtaGBbm9FIQRoUNBh6uStvzPpQ71Q0DvZBnWGyiMCm/O9jKFlTfh\n3HQU1egvUvgyJE7UgRm6hjd699kqCFRIXVO+elUdnKvxs2Kw9KF7M5s+vHzU\nsRs+5uYYy+FoDNgsinF/ZcIbeIIvFh88dBnieAS5sCxqQwjZGETQiD1Ko64W\nPC0X5FI6ybRbQtLFpPG/OUW61nAnUa2tmbymZTh8j7xfRm0RrWbEYFYQqPlm\n4LQchW/5bUOXojZMjk8f575wtdWFsUq4WNcrHUjFPIxD8IAEtpJfjf399BQS\n69hBGU+i5bM7gxp8At7n5RRDYj1LKFLqfNN2Aa2kGCD1mCLuM3gTmfUQDBIN\nVxEpaAI0jpfeYmQPqIw8WiuPwd7ITwbzszmE0nPqOyIa9oRSPhwRb3nW3wCH\naIQK8N2doMTIvvZ5/XoU0fri8R3qJQAMMV2//GdaBKZObb4wARmx9v9/CTi4\n9h7oOJbiFKhnLWNcfoa+nSHoQC7xlrJEezMshexmtiIaZ0XeZ1dn8r4wdCgd\nat0EkSiTgSG76qfdDSgTMz3PV0hpqRU+a3J0B8iTyc1YyGWYXhYr9CWz9Gn6\nxKQx\r\n=07Vj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClN0953OByWOCL9/vFoIHzjs0fM1844Dr5WKS7aVeXWQIgAQ5Z9SZAsPxggRZHbKxq/L3VXy8c/P+5e2JEN9OQros="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.d234ec3f.0_1626458883004_0.9563770538827654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","@material/mwc-tab-indicator":"0.23.0-canary.5cd4bcdb.0","@material/tab":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.5cd4bcdb.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jNfyLc9OGTZokEOLYzTpaTB5HN2OFGuUuwG31KENJ4KHyNV43DivlyZrFolsbDdwvvaDiLyA0kt2VeJtHAG4Cg==","shasum":"a10f54357450929cc36bc3c3ece18067961e9f3e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fY2CRA9TVsSAnZWagAAZWAQAIiZG1O4YavJcagtU8kK\nMlSFuUySDG+5C3/q/4oFz+/2ovvP1phGCgrIcr5QA4+Y5xX5TltX6U+tzdzx\nfiPyWa8owB0O04J5kWqE++B30BBSNLq3RhGy+GjKppMAyjDsZNNatdAO6560\nNUWriV5K2VnSR5M+nPpAFZMDLcsNiwCY/Ug3/M1OWpQiqr/qwTw+aieZzXWY\nMfghfvkCB9hEVJLImJjFw2LXaAw/Qatk8wBmHLiNCP8jCtG3pQqthcYz3YQN\nFx6tGswBemBQ3CFK726OqgnAUNS+xh8+OGmUCRkrDJmt6vaJaYdw9aCQzEaP\nPuDT0hpyiZv9qJl1xFUXnJOKkV5XHBwWsL1UBqRugxLvZqoXcA3W5QcMVomf\nvNDWTruPinl/zavyV6EXYpGZFjTs0ZHtRzDm3tN/2fI5JZdijBq3wZAh2HMa\n2FXBPNeaVjyy1FsJrMgqdVotMMzW3ztPdiGeJAK6mMlJNhrrEf+SJXbwuk04\n8K3PSKh+fIoXAfi1isdDruW/81b/yJkqerNQUNJaYrF0eMVHGBb3RHGw70+i\ntqg90QRhEcIuJeYo09f8hqXlCGtJwfw6Jy5jKkIydeWAxTQ9/ojrkELIut8q\newIK0mUW6HW7LxPsVAU1djriS3Tam381Aj90h0DzLQBfF9TrXWKogyRV2aIK\nLECa\r\n=JDeS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgIc+RFMbf1JwHGVNwWb0neHZO1ZYtCOAfBXUinPW20AiEA6WZCzUUeNdEVjCyBBU/KV8ycGPTMQKaNFEvbk6W4pB0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.5cd4bcdb.0_1626469942126_0.4581400376220661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.2b133cb2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","@material/mwc-tab-indicator":"0.23.0-canary.2b133cb2.0","@material/tab":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.2b133cb2.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tVMSdK9iSdkSGBJxEOAsRDV+l9u2M/TmrrxKH07bbfSk4brkdTIExgtmGhdMaiy48kM63O75lp/PMgUNRmpBLw==","shasum":"bbebdb5c869c0d7dc0291828dfe6b0c32ba320c7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.2b133cb2.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gL7CRA9TVsSAnZWagAAvCgP/R4I/qBAw1412sHNKsXr\njG72g5UOkePAxNGOrlMO9U660aJR4C5oeDoEnEvhMqac70GYrVHo5mYdF+Bq\nhDG2T5X7RxP6C01wZ4TyFhW+01XLGPXI1k9s/DwAx67irhpkQk7LM6RCmv05\nGJupGRqMk9L7AecvrmnjM+ubf9qSSo4X1gn+hPMLdS+owTcsOpnf6bPf7CTC\ngpRIMAXHruF0JO4dNnPEnilX+V8oeMb8Zngfmmadx/iQ0wi8WD8GYW9jsu4D\n53u9JKXtQN5J99ZiR1jdsq3616FEAi1ryPzLl6LJuK235HBYb7HLRNmUkNS0\nJQiDa2g8oxWyvnbOx65Uic5bSrF6gKxRjR3Byp9Bq2JN5DWGvm7tu5Plttld\n40kpgOMMkzzB6IC7ri3yIYIjQdO0JYTXfbvV419OAOkxkmv5nbffQVZshRjF\n6lSET0qVT3C8j9bSjLEs+3JxyRk7H/ej6KpEPOKz5Hae4Jxe7HKUL1Bdz4fi\nBd+xocT0JzAbSCMVepS1TzH8vAbvWNe6znuMHkb/Srb1LVzWdUFRkdjtxB8x\n7n8zN/BwhqJbVVvtY82o3rfakjfiUS/RhMU0WlqnsAii+Uvhtwvkj7DnVRHK\n8uvsIiBo248bQWgu3hI9R4jtzCqJ74nKI1sSX220i8Bos5H/VOyh05FH+Wtf\nXa/6\r\n=Yu4p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMVyXD2IJyvgD7KsXHc2cM6uVY2TG5cKjRcSa/gIlpHAIhAPowxtTvdqUZHUim3Dk/mPZKOOmZ6G7qGmaIumQq3Ry1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.2b133cb2.0_1626473211745_0.37117442470169326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.ae4f422b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","@material/mwc-tab-indicator":"0.23.0-canary.ae4f422b.0","@material/tab":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.ae4f422b.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dM9bUzx+pLqzPC+LYykgxUItogWK65lSl44E9s2iuqFBNYojXOYPGZ873pGkKYCOcv8yxqH2Tm9gPaaT8ox+OQ==","shasum":"0569550c4b29850e0985ba5d990f1d2cf20c1200","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.ae4f422b.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwsCRA9TVsSAnZWagAA5u8P/0xOFXPZWInxvZCDT0Kl\nQNCX0IJ/f4xpBTuRCptC6Y0ApwoDNu/RbrqqUi7dpWcR3o80v8bMtj94ijkY\nAWAC3hvvVz7V60/yhP4nuhBndRpP9c6pP5QKWLl2BmgT28IDsY0QY0WtwWFq\nd5oNXvmWH7iLLA6rnDT5eJDHOwlwOEkQR6Ngkj05oNubRlios1RAdnbTGOkA\n4gxFk0Hma/ENWOELQ8KnBJtQSU/igamclHirDnQGVEqj/n2WtWWHaNUygVba\nfr8OG9uW8hDVJkrvV5v94omh5EjHp/NTmBTHyK2p5NwgU1/Wcb7tCvXkjZ9i\nxb05fQLsoXJqC3t773P1B6H3u6khOXkdJR+99Fj/ydO5MzqVKF37F4yOZYEP\nWuuHB48NAWo5Zf/8awu8TyxD37jBUwoyBuIEzxsq46PxCl1+NFjSZWdU9sX+\nOBytAPWjJZvM2qZAWUr4VrJpaNAhytoeDlVMQ5E/YUtpj3PqQmID3KSNBvAe\nC4d2RMs3uYWdlo35RXtP20Npx28VFG/cWvjKi3OUKKN19QPSK8vQ1Q0UnlSy\n9rrehzfCi6/+k3my8h14xVSR/shUy7OrtdNA238dT+C6cwk0EeOiViqyU3dS\n593bI+HGDRwsXbHwpedY4TC1lD3ODVUs1iLU0BYtsMsxIWkWJvKg3DkMjG+6\ncE5n\r\n=RnGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFw7se3rDEyJuuSiwqbm6A294azUlLKa5Rx5LNYpJzx8AiEA48aaish3enbcIUrGhCoE7P4H0E2YUIk0M3ebNFDQCUI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.ae4f422b.0_1626479660748_0.868324497347873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.90ff8057.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","@material/mwc-tab-indicator":"0.23.0-canary.90ff8057.0","@material/tab":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.90ff8057.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C63FfHO2SCmxjnW2y0JDxyOtNMWVK1KszsJPalU3cgu5EEHpWT8SiefZrRKLEJgn41WzaPYnKDhEsBtqIpGUNw==","shasum":"60baf54bdd55cfad8bab85d5e4163802bb767d19","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.90ff8057.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9Yc8CRA9TVsSAnZWagAAKx4P/0fORyvEu61MZNd6kvPk\nBgyTjSNcbZsT3ZA54BbvzLJUvvLxVC8Yl4PEyoyVTdsY6qZlOQXhHY+DWuvY\nV3UGAQzCmxb1Rpw2dbrxEyKitNqQdhNfcrr9CjtRAJ7tSsMV0MtYoeYnKCMF\njLoqFPCTWXZLwusBN2r/nEeLgIkrVyqODBnDZQK/qCQqslSB6DB0RI+7/Kx3\nn+hA2y/hM+DDUBeYoQElsCY0vcFpqvGGK7Y56ZPmhPxIBq8fGrx0CKg8Gtha\ncS7OkyHjHmbSCkF3aGenKPTgQR35Xzr9HaDzTPUrMEtkx+6k6Otg0QoZkC2k\nRxCJbD9RVpK92ZDEJy9pC3hdyzCcgCTPDS5NYZkMvlW9djKin7D3pNLTx+0N\neHxo2p9CWQmrB4tpxVwFTMsY6lL7nFpa8ryjWjfZ6FiiuFypxfQUcp9KRLQa\n7ykHYgvllQKyEqvnrF6GulazAmplemboid7Rqd+EQMCLteEhqE08FQTRZA0s\nulg4NBLGFxIyedzNmSD17TpN+anv4jGMlgbvB7IbyUEnS0YIx0Z7xENfPDKS\n3+0H8UgNjykZUfBaB32d6N3PmLO5y8dhKvc3byYk8r4zHvJSSid86uF2akq3\n0hlw0lNf+9rWH3alpGpgQPLCldLiw8NWjaF15KGykkn2NJijKVUarDFoRbeL\n7+k/\r\n=V0Ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAItsJYCnt3CY2qDxwkOcws7OGX9evPgpkOQXmKGXmbrAiB2NhD5ONvBpPPyxNsul9RUbqFon9R51+fGeGgirwLOlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.90ff8057.0_1626703676609_0.5832532789922154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","@material/mwc-tab-indicator":"0.23.0-canary.dd7b75d1.0","@material/tab":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.dd7b75d1.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MDj4faAYemdj8i1+VlJpMzKDkaGjXcIZnIFJOjkwDGXBBgbtHlflLyPj8fP45YeSjil5z0uB0Sd3crZA9khMpA==","shasum":"b8e97e2581dd2c1be45cfa881d5bd3520cef5642","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.dd7b75d1.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buECRA9TVsSAnZWagAACeoQAKFOynvUubc/MmdQYw+r\nyREc7P0EddDmwCg4VQPFcL+/jNgAhHkua/GwOBxxSRgzH0iBnLUFBYCcQGwM\njnzpTQ2K0rweOb2a9PhkWUmHvbMidricpfzKXUxn0zjjKpyEjNZOJyDo1qxZ\nJAl2HjbSAg2Kp/01915B1N6RA9fijVmPZWqCTnogkYLgkyS7OK9u0VEmBUaY\nOO8iM2D2Igoea1HXWWPBaVrTKxdq0ZHwERxaBylV/Gilz3mYxQk6Jl1yvWo4\nC5HidhpLnw55j5PXvCA83qqRxg8mC/w52sRb2e10IkL3eka1QHZgmvJ8z2/e\nRR+giE7gffIc2895xR5umSLd1K+xbNJG2JoamsiNk6iqAebaoBFUUrIYT0xE\nUYuwIVNJ+zDcAcU4pZW9ajL2MN+vk/LiOOBGe8X9O6jnrgrCeMf3roGTlS3G\nKjZ6XQTN8xNXJZHQjzgDPg2N1SJzluFWS2PJUOENwrm6UuvRJXxgYrwafjNC\nEpMTCEpZBBFS+waEJmOrcFhr6bnkBLE7KY+TUuI0JAs8XD78QEbzkJBwJ2rj\nAOLyUrc+7Q031bqwG0Q+9hOwZRmBE75UksqNZilPFNPaesBbUnIFfwRebD/j\nIdryx+vHEHNOvUA+HXJ/TNF4cvH4y45Hs+Old/WUARp494pD/iMEqBgQ83fT\n5BE3\r\n=7XJe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn4Tf+a2x+xMwYKkUf3WAmRw6E/KiB15rHV4YFhBt4mQIgJeIDWOLAkTNUVgIvHy0oSA4WxQAxJjVh2V+b50446Dc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.dd7b75d1.0_1626717060041_0.39393636601553306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.104debd5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","@material/mwc-tab-indicator":"0.23.0-canary.104debd5.0","@material/tab":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.104debd5.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GM1nzooxjmh/lV7TJyGes0vrnBWP2cFfhAjy97qY7hknhUqRo0fQA//VIe69tqyqGOqnGl3rHDyX5+Zl5GYSKA==","shasum":"18552a9aafbddb177711711f86db308fca0ebcd4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.104debd5.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKACRA9TVsSAnZWagAA4qAQAIjjQGSHHVRHlv+a68RJ\nd1ewy2mEvTq6AiocKmBT1Zmd0t3tI3374Qq0iu3clj4C8W5mfqR82HKAqZOV\n/FJUizfu0UTU7RY9tBLxo/DoRcw/rbtmpqlyo72vWmT3GZ7W1IHe3XxVsmeG\nR7j4cYKYnuGXxqv06q/i3AbyE70B3aqxosPvNwbry0oeufgv1b+Js8+cH6my\nHQNrwOxD6ezZS+jyqxPMWx1RboL8+07C39bDPyqdMgmNMOt06E0Uu9W86GEe\nS/zSM/+keCP5Wjzg+sUJWHA8vMACSPT8Oy4UrTlLAqmsCJP2SkDAMpf444X5\nKkLELGlYa7lgZE78d0K7KDZ7FimKffgQtnOrzxqyfuzlAL7atghNcnlI65qF\nebB9qL5g7GJeH0ymJYGBtJOwOY3BzX7lRgmJZ/O3Qediiq4Qn8gxv9EVt6sR\nJCIAJGy4f3wyz1uEK7E9tMbpang6WBQmIeKm2esgZMApxSMYdxkbVu8uizKb\n63xkJzUyJcZGPUXhVCfUwYUnaUxpMUQcOUlFuhM1FKkfxPV5aKogjHGp4k6z\nt9aUYEgzfjfqNQtVrmSKacP42eIb2Gu+cGRaYzeTOTQQCIoYCnAtyl6mQxCS\nqqdnA80f7VITZIl0Vfx3Tv1isdbK0ngEHzzuVs52JTVnEqtvGHxyaGjfaYuw\nzwp+\r\n=k3dU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoT39vdkbzer+2vfdRagJRh3QtJ74XsJcxRXTG3scMZwIhAO9I/qUwL/7v7TcGCRfUZoLOTjEFzrmNOjLVFVDi+HRO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.104debd5.0_1626735232364_0.15284886557200394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.4612705d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","@material/mwc-tab-indicator":"0.23.0-canary.4612705d.0","@material/tab":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.4612705d.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uPgaQ0ZZMPHtqxpWDdTc4j/4U+CfTcsHIsrLsSPshCXrPVxlevl8MuvioNOFu6zyAIQYATiB7R2NYorGGq58Wg==","shasum":"2914d3e54526aa9ab0169d31434b0e5f09f25a0e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.4612705d.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQqCRA9TVsSAnZWagAAopcP/jyQfSquDoYIb3OVHuJX\n5kdRLe6/DO3JavzG7pqqKPsaL32cK47JoZKBhrD89UnQVmZjmnaw00wwEyrc\nxmXmSSSHmsPm3bAT4IA+T4DQlYJ80tre+bPTC8kfZvmpmnzvBhmc9lj5llLv\nrEpIB22FgFv7+6DKf7Kh25+QbWbYS8kqLZ0bQgcNxayPxPblhmlQNdYirTcN\nS1U2FyV0hwdsjZ7FNQuhmDHER91zevfuszc5Wg2dYpjwzB4F921oH75gAuIC\n86FeZ3W/ubT3AqFNeGbZwPpjXuqSiH6RbYROcpJt9JOyJd7o0ANIsaY9J0nE\nySoZvGuWwvKCV0jGxe5ZRpLY2UcU3TAXoh8SG2VoTz2/VrKbPRJqTc27wt5I\n5aAT6frb1cvPbqtl3r3khKcTBtmB9Xda/tKPlShyP9DoOkuyDWCUuhdth8Dg\nc07TRgDFYWoERzO/bIrOMQZbU9oZbjui1U3k9NlIDO7oQ8XokWbR3jtt/Zsm\njN/LgLCQGQHvbMM6Uw899KTg2fU6JvCPkFDUhYl4t9XbvcDnok85ecUWmiWW\n2MyH8TdFWdcW8rFBBbiNbg15zyYccXCpZgWTg5DzibcqSnLkbTTRCRVo30nj\nmNSRciNk7ePl2oZiuCK7i4RkYeORyMqKv4UaeE+5Cd0IWK6INUsIcozeka+m\nqSD5\r\n=KNRe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvz5ezV4KUXDznvSiaJBynQWyrj3bTC/WJlFPtck+z2AIgDW4TuoOu3qlYQHLtWZWdEmTXfGNkxBS+p/T5KMLI6iQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.4612705d.0_1626797098293_0.14762606844652382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.b36502a2.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","@material/mwc-tab-indicator":"0.23.0-canary.b36502a2.0","@material/tab":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.b36502a2.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cakoXu4DMy9oedxWUvIGLqS7Td0Txwt3P1tsC8HlZ13CG/kD8ePNGHjmguEnKOyf6pYqqH7wdlLdL0oLdG795g==","shasum":"92b0d731a47eaeb92b9e07745e5f99ef16a74cab","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.b36502a2.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEOCRA9TVsSAnZWagAAZ8AP+gM3Ynd/njwbTbMh3FVN\noRkAzQOaWwl0WcRLr117OBZu7/RzHBdPFwSJqtbqovQxcCguoak50wVIk1uH\n5TpWUQz/q1kxAmrgv1F9F+R5LdMiCuEDFyTZuUhZsfmtCAntMFflI3ML+SC0\nE01rjqn46TnmXfyimzRpxyTGWmiVpfYLKuXXmmO+hcU3sfqMq3kqeoOXBeRB\nuNER1EP3ShS7iyUtn/ROVKXs/OYf6k+xMzTQsG4tWtCrgVRbNZhMKtLL/VSV\nW8BsL5Q1a+wufptR3fdAOJ/2ktX9yVTHA2FyWoy5FHq3NEcAyDl1LDChfy2Y\nTrjPBm2K/Urcru6Yba2J69JBxbMIsmoT+hlCjMyU7OjuXrDlT3FyZ/dconu3\nGrvSkliK7x0+Z1/kr6Kd+Ug520OUf3/Tf3TmZuu4uKJPDKkX1ploCa0BCISS\nWBs4uAH9W60obYrTOf63cUBClyqiHKqtbWovdt3k8I8M6qZVKFYOtIkAJ6aY\nLg+qlSjrnygeKJDDN6D4VTY7RzVbJ18KKt4HnQQ/jtIYfXy6Yh6L7/bCinAF\nSyMjsEJcDdDnM9okXD8gTZezcc6URD67717olatGlDm6SgxjaGdT5Qy2Bh5i\nQ5PvSCBwCHeHpltqYA3mcFLpcLVldfi6AQ93A9PS0DhUHPJBSFJPDLrAGROL\n2ERF\r\n=Y2lL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEz+nBxKRFHKDCVkZrwd4xlXFLeIw5YfqtFTEmbGDJsoAiAm0LohgtxBRFm0BSzAS1xnQlydk2f/ce5s6gNaxx16WA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.b36502a2.0_1626906894593_0.861657726349321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.2c392ab3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","@material/mwc-tab-indicator":"0.23.0-canary.2c392ab3.0","@material/tab":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.2c392ab3.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g2lGsg5kUt9IM91TMX+kQoA6xapU0iO2/lZMcBNrKfD4NvXWV+kFKreHPE6gH5soY4da8pVAxKmYuiRBEbFRMQ==","shasum":"615e8070ccdfaea6d5007bfe0ea7b76edb4090d2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.2c392ab3.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZYCRA9TVsSAnZWagAAxfQP/iw4+hoN77Q3S88WFh7Q\nkvVwoBovY8nhghgPB27jsenpTiJ4PPejR4UzdqmBthZHenVW5F3kohJf5WEh\nHuNwFW4BiEMx1XmxHVzetAwqsoJRlemRbXv5mzBOWQ0V582decQ3PIznc/Zy\n//lgvuDWYZvqXwR0H3WSK36UEHfPrySHI0MUte2GO9YqbbJDmJXVzHlJ5Hzx\nKzQDMGeZDeuocDuvGhs0bOv7WroR7n8h1drpMH35QXZccte/1CKxh5uGTB2m\nRUk+OaA7D87/rRPEPFzeYpmJsze5klzfYPU7jUWiIsC9X8/kxyJ0nXMc2CWM\nuOjvXPJBH6IaTAHDYkBboMJVXLJJclhI8xCiqEvvbuKAuda6s2ibf0bo9A0+\nP9bQzPxRQYSrOuK1gEaFAhu+iplW//Xs7BmAwuwqzBHfr471RT5nJAcRBRtd\nV2CiJiVxh/Eh3thomsQTFBlNQA41I9z/uAPWlzy3fPjJaTpCx3lyN3R4ROqC\nT4yVao9g7LK2skn2YXQh/ZMvieLPihn8ft3zf9yPMGQZGJgThScieNhLyiB4\nrVbhdcpJI4p4AfXTv0itMiO0FCtUlGrM7EZSCEHS+rm9za91/l8qS96lG+UM\nhNdtmLbdzpVhD7mfse2PJEF03AtU4zbf5HT2tfH4/k9OPWT9kklRJ/+U9VRN\n7QO0\r\n=0JqK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMcJkZMeX2Ki2YNwG5gS0NdA2FVz/DJ8hNetJQ8y8GsAiA+f7pLdpdQoOu3uNhs2IcF8i+aK2Ox+WIuXqmEsUYjKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.2c392ab3.0_1626965592531_0.5928073751468479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.e8bac95a.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","@material/mwc-tab-indicator":"0.23.0-canary.e8bac95a.0","@material/tab":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.e8bac95a.0","@material/ripple":"=12.0.0-canary.5f00e454a.0","@material/rtl":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nldNFxDK7gpD5WPS55TYzinC8nnJ2LLCPcjsVielr4PFzDzJCnYMqsSGEBxW8wU2ZRe5edtmm4tX7zGSbHCOqA==","shasum":"1ac9421b27db8f8d4d0cff40eac1c7059fc6877a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.e8bac95a.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6XCRA9TVsSAnZWagAAS2YP/1jcc+0Mo4SuBgiOicEk\njHacn7yf1p7WrpOCT12buwWGqKwRqVf2KZjppkY3DdsU4GFrmyydci0l3i52\nqQzI11VtincE6ltlyb6kdzZTLuz/3FNoqMMDb7cORu02x7Fy7fdpd+mV/Hhx\nYDhwFWtGPKfGgPensYdd3XQbODfhhQm5oUQH4mfOMVsOsAQ2ZSoD63kNNMrz\n7L7RfYUsq2uzTvRIAg7AGmzaS54Rahsdy3q3ZdP7kGCR3R4ZM8hvR980UWdP\nc7HgcO9zD1/VhvA2O4aNHr+H49K1YoTxvjWji3qABK0vNfI/lW8tVg6cPW0G\nkBxyAn3PoC+r8Rk1LTZ0OZ43jD1gPWY5WtVKhEilXhnW6Z72IbTCk0Vrn2sY\nRiOSUxqRXZtgSOiM+SCaXmb0T2msju2v/tLYqgivCOsP4Kr0nT5urL2XgNBK\nsbURZWt4ot7ge6FJlpJS8phI+Oul8A7WWQU5zYYAZQPLStvc+AwzfaZU84OE\nn7QTdGJpB1GYOmsrMRH7kxTlETXxoPKnRyUEkvIKstt+tcizk931yCauC68x\n8kK/+KnUCpRfEe3x9RFYQAW3T6EpdUYZ8NAyN9Y31zFVMvOyeVos42HboGoo\nZfKlFnC8/jKeL5pxv1c3b3IaKeCg7HwzdPNdwJ1LogssNTKaeE/BqzfAZg21\n9Tmk\r\n=Hjqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH2mji5JSTfC6l569NFSvLvgP0UzOKIgpXIwM0Rf5sCwIgWYdN0V1o7SLtJBHxHT/RGpbCVpADmPJY9vHZWdbuht4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.e8bac95a.0_1626979990678_0.7164641401681959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.38f29f8f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","@material/mwc-tab-indicator":"0.23.0-canary.38f29f8f.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.38f29f8f.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xb3hxmiHI416BXZiLG9QVmMJeTH8wNP6EhVVfVoWwnDr2glRs8rMQMfmKrbPBSbhVIHVohH82W4s1W35Por5pA==","shasum":"bc08936be0fee9dafc449dc5b11be1f864d8b3ef","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.38f29f8f.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wd0CRA9TVsSAnZWagAAPboQAIVkppTj80dykRUtZ1tt\nAxdN24k1Grf4Zoa5jNvEnovpMrRtBayHM2kfAEUWNGRsAuhMqa3seAJNST1T\nqDauGSy1IL/bOmkCYFnAHK6DaelhgqMezwr5kMz2BPyWeT+mpP/rv347wz3H\nbkXMuNhfBQ0StKpyjhkzxe4009tPTmR71Pbl+lG4BgsZONty2PGifJVH1O5K\nxSDhMiki1zLVh0roK4kLTGEbnZ2tAf52vTJLv2lYivsDxks+CqXmO4NWMX5a\neFS0xGANo9mIkdyYSTqHZqP9AuO9/+SkrhkvKsLe1txMhRs5Pg4BTkgEJ48R\npK74g9cuWVq8JR/5JhqHgl/MwiqgxJNKwV7U/CA7n86Jkbp6POKLQn+Tzw6/\nvP+fVOwAOlJ7oKzHbs/WP6SGhnDzWcUapeYnyLjLHyGd/67NRwksXSqKTE1w\n+YggJkegMikQuMnAJjLqAO+J1KtqW9Tin+FNfWmVaEMo+NNFlNumcRiYvZBG\nwVidHuCW2BHd4R3d7DScAuo1acTnObLLgsEN+Og+0ztyDpz/XwDUkjGMgBCU\nxqV1hHWRLG0zB+14/tuPCJXO8JcHwy2CcRKhC/HvPAJyolav8g8q4LBTDtas\nSR0/uQiXO84PC+j+8MEkVJjB1kXioJTMLyNXH/JFOU80IcvyCa7oWDQzMlrz\nJlAj\r\n=4JTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUBog51DC5ax0hCQseTN7/5HHMvjNsvTu0ZSS076VfpQIgEJBvHtjtmQh+kbJcdPIqmkdCdHJX1MznTMDqjClOjnQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.38f29f8f.0_1627064180122_0.8234027832726727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.e0693475.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","@material/mwc-tab-indicator":"0.23.0-canary.e0693475.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.e0693475.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Wz7QeOnDr+QUAVGfNuhWUkmALP+SO65w2yxapahjSOL//X9DK3N92ectikLHTkquwwhJ0yPQRXMAThXyf5m0Dg==","shasum":"4182c47c5073067e3f92fb1bffa0ca628de1ee6a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.e0693475.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDdCRA9TVsSAnZWagAA3UoP/3Jirc3QyXDhMhVyhCuW\ng1n55/xiAhT1L328cWyVrz6mCSw9meX7Srtlx0sNvYioWw1ExGzmO4OTaMTK\nb1qE2/Vr3QtKTCm37Sq7or//yTIDmU+3AEiCv2s+ipi7ExeQI4Sqr8eefrGf\nMVPOtsKsZYZ7Ogv94AXTV1wPfwf0yiyWdb2fCDbaFMxWAwiRqkGL1LJutHAf\nLX7rnYtbgPGV3wU3SWYCpAheTyamLhtijggo3yU4u990D/sJxqUEM1bEaXlD\nkeamEnHbAtonx4rXxUqb8GcBhnivYbtHhTPSQEuA9FutkjhoBEX7eCIfHohs\nIn50iCT+Wp2KCKIpx+iHGya8VGFAkMKwpFa5Pkm8L7SvPBxHmuKEBcYyqyBH\nIpZcQux1PSG4bYuVzcQPae2om7Ebnl7PEVN4MVswaXneIcHLZcXUAQ9RarRt\nW1F09aTzPi+BV7dM3N0Pj5T+Tb39YLZMrmCwBTAAsr35fXr/442Hjzc4W3hE\nZX4TKCXKSVsBZ7pq4DZXXiRVK2A62LD9/ebqW1A3nNcrrvknqcI0fLigOzBI\nJHN+WxijVLf6/4mryEOyvvTaZcNuHCq1f47uUMYQhU0bGqQpbyGlMtYIxOvh\nSoP+iv76LjpKW6eBbyxMXKP2ibRqZoxtheAAxfReceOfYQ6xMPRpZH70QoVY\nxXHC\r\n=x9du\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH07Rq460hSKAU48IXESNbHKFGVaC4/7fg9DESAjHT9aAiAukXl4jlca2befFkviUrJ7fRSwnfrSL4A2EgXoIzwVzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.e0693475.0_1627066589081_0.9754038091753507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.d595e030.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","@material/mwc-tab-indicator":"0.23.0-canary.d595e030.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.d595e030.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z6m0bPvBYyLZJpL8X0E2yEcs09hA8sdVFkR/+GZRl52/aIkzRoJobF9ZvT6QBHazNg4DqQG0Ru9nyVmTgqMBrw==","shasum":"c8c8233bca89111056a06daa91aaca7bae57aebd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.d595e030.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxLCRA9TVsSAnZWagAA4n4P/jObMoqqbnIQIKkQ2eIN\nVdoVaRUSdLjo6LNW3bSPA7ytNSQrDjXwGgY/g7BsHphQ0zNMmCN/6oZHAucS\nE2KHTQn9wg3gw3NGoEv5ggaopDNCjmnrZh5oHL+MVx8Vyx9/IfSdgV4Vo5ii\nvV9jGbrm4ahyVXTxx9xF+e5FbXeCluUhi59l5LIywxhX3kThEJ34nFxRSTUM\nGCYhw5Y9hfbSRucqKBH6Iuq2C8aIYwzElpvMtqhmcQl1KSnZUjDbswUDPx4K\nDbldEoT64bVc/iOFyZqTiQv4kMoZnR1XyfnbheSDNtl18FgZ5LGo5RnmnISg\nWpwoXmgSPx/nq5NDStfxd8cTt6Df68mthIeBvbNbHZzzpmeFC1rVuxUbVxAy\nvkwVJC3UsSC9cE4tQc1z/y+7VcEDBSob8csITU2jgIOQ1xfmaDJP2lunbUKK\nDhUtAD0kBqQRuwCeIjFkjqFptu0U8w3i4SyRTEv6jb3ul7JLM1q2fnwpqbFp\n9fVJq0/xP5qM8z3LAtPpRaQlmmjLNgRY0i0yJaw7NQNukB9ZRJc4VH8PjE5p\nrV0Q2L1QiEzGC389DrdWbj8ta2XU419VTGvhA/cFYzXgDNKT7HaNaNq0psHV\ndxxukFzAZBD/eCNIq5yh7o6t0ZZEZG/dDFJ8YaASYnaW6HijOJwoieG1dER3\nY1sm\r\n=v3bS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiyF9E4IZNZnJvmh6ns0lS2uiIXTRYs4limbjjbUo7iAiB6l6iwJbsN0WSILnsM/kuhXTBegKAomrzVwmGKdb4kvw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.d595e030.0_1627073611172_0.2510297050292285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.fe7cca31.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","@material/mwc-tab-indicator":"0.23.0-canary.fe7cca31.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.fe7cca31.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mlCY6NZBG3z8D77xxQgEtPm5Zb726khgJzYM+WwXsufrJnBPtQ+QRe1BBNTJJjwOBQxrgyVQGW7rlvgTi3JeBw==","shasum":"fbbeaa6d48f93dd3795537f0321ee1437215a5ca","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.fe7cca31.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zswCRA9TVsSAnZWagAAulkQAJmYNTgAGVO3nLMwsjc5\nsQtyLCN+tQAFyqTfCbImJu4uvPce4+sX+xlU88lI4tzP+PMh+eJEMAI57hYh\nEnZA/GfVO6AU1dpVHvM+lciwlItbKdkVw0j/NZwPxw3o0mJkO/WQRKo6m1YR\nKtX5MSWDDZLXjed9uDQdUFqfkBxSDubd1mi/0SN/COH27MKE9cQPCXctKR9q\nb3Q/zOSUFBJtZubRPGbxqp1h9cQPk+C5uG7uvVy+iwWdxydyD0oSswua9MCO\nugFnOfUZef/CuIBZO277kdzx4RBvIIwQwBFtrEuUxGe8617THBkIWEtyPoKD\nD1nrrGBuKMsQ7XS1zRKOe3yqkZvJm7ng8R0wuZqPrhdVKcQBqb98Jrr27qdi\nv2HVhw2IQPX/G50yiyvXdSljnrZjCbfj8KARM+S8IL8ih4ROAR4ND1HvRmaR\najlFtZtyOOjnaUfoLojsjiocj54muzezARkzOdLu1QvKU4zZaVl1MdHp1KaM\n59Gr/UDzih1WCrUhcsXM3g3jS/ozE++N/KiWFwi6tQEZwVzie+b2ooM533SK\ndv8CETBPzvYdmA13fhg7lfs/nU/2FXfNxGPdTTk9ygukO6jYyJtSlECDf5zS\nhIU9LyMJHDZxjYvjwWxkQzRmp0XjXknwMwX72hjZBXPjDXuyGKIxcxhp7v06\naU1C\r\n=7oel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmuvBatojtl6UP/xM9kUtynnAGARi7itRnK/FyG9KlWAIhAME86kOfAfSf/67jHLdJIWLXgOSyHHLWPGPIVfvW6Npt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.fe7cca31.0_1627077424077_0.6382131760760614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.fd9da483.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","@material/mwc-tab-indicator":"0.23.0-canary.fd9da483.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.fd9da483.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9HuwnsDAvmAtpsXVGk/Ay6mau+wiB8FUv+IZMuyMHvhRnGPFaZQPaMl3SoSKwSjZrXX+CCSMlNOM93t6wHWmLQ==","shasum":"b7621fb53fe704bf5928690b325d10fb4d9fb65a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.fd9da483.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yg7CRA9TVsSAnZWagAAKKAP/AgGCIll9L3AIA4kxxY4\nPrY8Qtx9c+t/bM9kR/u8nTyuuyBmjDXhyaCBniPT5EyCAznIzGih5ZFeLasv\n3p04X5vgYyv6jWSZzVuN0WibbWkXcnZEKpRlWlaNGqyN0+2gCbiemBHToOKB\nCUPdU8d+bMvGymvZILtQBIWYtHVXAlJyeVIkvqPAZWN9cgfX/85FC8Q3mKAF\nBy/QsgUegeJHhkaaHIoKdesfzSTP9bAQxnD2+h6pUhiE7je4aYUwX9nweDZR\nShink0sxPAyNZjbELVezc8jEOQzJQ7Ph9X52G8Tim0DTod/6uYpf2qISsFGk\nH2LQl5mi/f4VnCdzWj/dM46VJC4bgXOLU2hWn1JUDuE6wThRxp3dPa58V5Ry\nrVIqhiWDeH09jlg9TM/imSQ5/fmMsKpdULM9NvKpMA4tWFNb/Q0/1XIWWm6c\n+i4NWWWyR/E0kgrAn6t4uJfD0LKAmo7R3OfThRgQAo5BXv9RGUIODflGBvQV\nc0vmBuB4npS4FVuj+4j2tpgreFrmhaFc9pBRNTMF2r/0Y/OBQF7QXEBcxtfP\nzYw2XAVhxNfeIKBsUvyc/9VVL7VtfFXiaBjw7k0zIyoXMRQACaIg5uKrShDa\nn2AEA2CUMNRCfEwoTcgmbs7u/+PGHdppLC/8SR+ZEc0ZNJO2OxI4k+/cTqqV\nsn+P\r\n=SDpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzW5n24UHfMh9WdtFJBEr01z9rRVCuYtxCcD086Y3TgAiBDCnuqCHNPZfnMua4pBO4ZklMwTBifjytj0xvEVConVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.fd9da483.0_1627334715417_0.2485271462131431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","@material/mwc-tab-indicator":"0.23.0-canary.8a4c7e06.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.8a4c7e06.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3VzDOze47xBFsW18P20vM3/IiJ56N27+GPMIZfvod0ymOHQTCWR/b06phpQjdjkGgbvX6nGZd0LApqdkSbrqSQ==","shasum":"d0e97f4e5813142c01bae08fa7bc69e021917abb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.8a4c7e06.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrHCRA9TVsSAnZWagAAASMP/0uyCxnHBcDXuliyUCOR\nzBiJM8sCtZrZiUVqzZAK36lWToYmyqhPaXrceNvapLnRz9JYSsZD3qmBa5vT\no0f95H/9KLAFZ3OWCMhgdNtCKwJOhl4C1D22z/JNziPfpfQA3JllVYFXNH8Q\nLGltRAl2l7O24mXqVPqH/Xh2ygtcHyJaY5neZUDsaAIcn+0u5OhB22yFcjw6\ncaTXR34bSRKzxKr17zuRDCYl40IcHz6BjEmnxE1ZCerhHVuY42vyBN3vUxjw\nFLSye+7p7GbW6rm/0qD10vHg3TFKzz6O7Mcn+Hl77oMvF+5y1ZnGERxE6Y3I\nl3qaUauefBcB1rgbBFUO/tpaZlGvuu3wSnBlNjBN/YQGvQ+7C8a4i5+Rr6nz\nkX2M8PaiGdmYy62PGDFeWTilRhPcu9Ub4bSzJ0MEcKf9L23yQLnFl4DbN5DU\nlZY6Tw/mKybPLg4PoYADrQe4Keg2u4jCBW0U+G4csNbn8hPF6e4wb2cbMVxh\nZZZ5fwhX8NjwI1aubcJzRwnDwSfn+i/bqDfzkhMaoR0sH7gjInWb5rze1kCl\n63vz/HKWAwYEHrs+0t3mP45CKR/7iMRbfDH6nWSTjTDZYUmUclikG0nrg5Db\nR/Y/hBpkctHvXMv/L0XuH3SvwF8mB771oR3FWGp9mDkA0CvlBidGDSNE2Grh\nU0KC\r\n=RGAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBS2Ck5IwkSFzL6XFKCTvxipL7VAC71+ftihHp6FZKTCAiAe7FUJ8No2VyIksurUWm+Ufsk6bdOSe8HJbMB16LV8Uw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.8a4c7e06.0_1627339463529_0.5619991495327126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.5b395fd1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","@material/mwc-tab-indicator":"0.23.0-canary.5b395fd1.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.5b395fd1.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b+4BwzK1agr2e5aNHpsXrgIKWCQMtFhZJww5e2V5CnWAmc/vMNvqkn4PNXJekZDH3mQmceicXr7azI6o+7JAig==","shasum":"d86dff0f684ac87cdf41283c21da6fc3f2aa83bf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.5b395fd1.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5mCRA9TVsSAnZWagAAv1oP+QE/knT6Ee3hzZ7xGg01\nvZxvFDz0WyfyLscX/O/wI4ltg3APR6xvCeQQZQx/YgieqMyhSFnhBnB31gYl\nNc599InLmB6bF6mt83xSPp3P6M8oYf+K4ca9zmmKV6cFA9nAGbFTuHTZVU7i\nXHZjHHfmYugQ4eFX0vOdkGf83cFEVM94XXOx/pEx0JffkcBqztwk2Gm3Sara\nAk5DSeENVveYe2ti3h82OBTlXyJeO1PvBF2XzXum/njTdFxNTdrSk3S+XZQE\nwOWr5eJeBhd4wm17n5hi2OekeLiFYnm3LhhGEzlLEmz8lJA6hy17ujUgTvdk\nnSBj0Ed2/qp/LTfPQ1IE/iPkOc9T2CVnnlw+kdhhc9NCFSjoFtsH2XhXeic1\ndUmzV1X3JyX2w11bed51p5Y2Q2K+9twB9PTt0kQDy8mOXg7sFiWz0ogbovLg\n7kA9zeHPIulqDv78LiwF1VgyySU4cC38bSxRqcDEbM3hUeI/fxgU5eLepc2B\nzV/Cq46VpUlne7smsm7Y4s5hjv30H8p0Fu3vXWrF4/0qRF3FXZ3a8d20m4g8\n05JFwaKZSelpK8IA5qa47m5aXXlw4exPMWj0sK58r+3clIe7V6Lxd3pOUX4h\nO/ThqQH5xietHWxwZnAUYoUvip+jQrd4JVbqtO/HGOm0QfDU6izq89avd9Lx\nMUuC\r\n=ILtz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCJoO8dtjl3iVjcVda5mlKlXwjkidl+JWtWvEdnHgSOAiBEM6CkS24tWnCm3Oz8rla32wWKVEMMS+n5XByhBHEClA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.5b395fd1.0_1627426406386_0.8572670761198089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","@material/mwc-tab-indicator":"0.23.0-canary.e5efdcc0.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.e5efdcc0.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n3Ss5vomRDkBhOdo/CBs6N9j3hA4CaJc1xyM/047hiDsW9zyJJuAguLdNJihGZHl147iH3zKop8js7WFDQ7yRQ==","shasum":"4ab4c00f1dc760408ab8a13dfeeba41eeb0450de","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.e5efdcc0.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJrCRA9TVsSAnZWagAA2UUQAKRdNVD177BuBa9x8nyH\nrNXlVTlGkDfKYHRioO3TOt8BGa3icooVdi3v+ORfwr9MacrDjefNNiBSl31N\ndwGIz0KfmXT/zgYxdmZltxUT9xCayiFkgqxjz6P8R62soUrqSY5n++keQa+3\nVrhooh5SR5tDi0ktXWqS7tnIkS97VwR/c+4clZxMvZbxA2q2ed/dNF0b0PHj\nx6UxZDSJE8UBWhEZqQQRqZltYyw57yy6McdfY8mAvY4My2x1WSGj4q7xTpJQ\ne7VOMhQbPwStnD0YpUnfONgLN90FG2ztHJBDBp91wXPEbK0EiQuALvsvRWjK\nV3CB7/5AAgzlVuHgiKuBS4Z3rjSl8NDPS9xe8sEfJ/M3CckqXvq9rJonylXc\nybmp6xf9EBeNKS/Lc7H+2BB8vk2RtEYV+c6RaU6UaPFxRupjAf/VBmZ4h7zE\nEiZQSJlvmGwQ2SexY2yanSvppu8moK1enP5hTAZU1bU7t2xJzXkW2yjrnmCt\n7ZQdylGx13M05o+HPcuMy+Z28Orb4WrC9OY+BB5cgx+/fX6bvJ8lAKete0Dy\nO5QRq5MrosFgxKvNSpbN3RYjc+Z5yTbCY6rAR7ZmyJlza9BHTAzQl0RquANB\nVBT7dMiC95kF+1IEMptk8tgZGwlxQjRP5t7zXeDl+a0SnDjunyTAKoCvx1M6\nLAdj\r\n=rgsh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2Zf/9lObYhlAffHFQiB5Y05oyyr6r+E5whbd3hQeUcAIhALcc/fMprZqqj4pza6mk64X/qWl4usMeG3uPL1rVXwF+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.e5efdcc0.0_1627492970988_0.808537810839582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.ab310900.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","@material/mwc-tab-indicator":"0.23.0-canary.ab310900.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.ab310900.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WkzVTNllObGqTnuILcURw5VphdNoKeNhNZCCfuPvRTHi/+dYFIZbJaxfmQclyEcB/sgvpoObs1wzaO1cxFjH2w==","shasum":"c397b6ac91c864b4bffb786c9e998dbc8f095994","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.ab310900.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxXCRA9TVsSAnZWagAAs64QAJZtnnniLS4ASRm6YwDh\nlLiIckdZFA4GSGLqCcvCKRi68ClBfTZMKyj0OqPdml22mjuRLOyrJAAAdE9T\nJR44mfouaCAe0TQUm6uDabHKjkuOjZtfYALZ5Yle75tFy+nHJaLkFG58qPsG\ncMwSk2LTTk7PL4uC6dVCc1QS2zrC7KHs8MsvG2LSfOwVbLhOOUSIHPD16hRO\nqy6TXpC8o/xhpTpaL6fkk1plrIlTys4Wb4N4ly2wu9M3XAWSiFah3RRudgls\nn8g4mH9zJ5g+o4yinMd56rMAhm1Z/4FjSjG61rLVj0T5w0abj0Wscg1D3VWp\nwvzUWyYUPN36Hg5Su8x52CQUJtCYQsrHXsh982aE8WMwXZLMsSY5iCmKa+vD\nObN/KS03/Ah1uxF86P0D70i502bezz2+FRGHvtfva6XfSXCzYdZzIjRegIsU\n7Yqk9VGOLS+yZWlsDOMhrnB6skDN6wjuC53G6yxgkFcUrVBhGXQ4VpuLXWVV\nzJdZrxwQyoeHH8rabQV587K1s/w5sCl5anhCY3dN3U1+kXMSiXPQFwKQTLHH\nznr+la3am5m9VdsPI+3Au0DbhDmIujKY/T5AYn8L+ddaVikTffuiRQatpWsc\nfwcPoYmLq+ooVlfJBJW7lggNFpbcq/6/c0Yd0eQ5uU+ZdTbOD0+O9wTnohk3\nlvLc\r\n=3xOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV1MfzgVyTtcJ8EfY5AMisgYuLS7SiLpJX0dUjPsq/GwIhAKMm7VftQKbccsTkcWQ/kWJ8XW0YwjX1tGWDVcAhGGlO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.ab310900.0_1627503703120_0.486602506687988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","@material/mwc-tab-indicator":"0.23.0-canary.21dc9bc5.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.21dc9bc5.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yGSHpG4L6KfTNspxxAXd9zF04IoUC1KxKdOV12GmY0GjB+sS8mVwELEoyVikB8rrwQiOs6i3Fg4P23uE7BHtWw==","shasum":"3cc342bf2367c5bfa29f9cbdf04e3e218a151fac","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.21dc9bc5.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb13CRA9TVsSAnZWagAAnw4P/AuOZTg+FD7ktYjxRn9P\nMhmNqMNXWD91g7u557y5M8fp760zr6CTzwuyQA27tTgcbXqfPeOsy+sJPm/O\nGhE0Z/bMIfO1FWV26a6G3U8sHIcy8ePkTkI6KJ2zIXPQ7+M1WwdBev1MXjIx\n4Jk5JtM7WwuluMWG9UhUMGVokzo6HUHx0NUj+TALD0l3xVAe1Me+dt5gVpui\nIK+yxTdRlTEFejB5WGKGOvBK4CuWjfC6MPpT3ZCQMgRY8n30LPrfZSfYwsvI\ny2A5dXki+vht6C6OolnlXT7Rfx9tTqDI5pVlovs//s/5zRsc/df1rDo7Vh1G\nEtsUIHIzfvPA/NohBepVnSpg8R83kwlN0RccDHEVgw1vLBqbHvSVZd7xrwMX\nIIagFfd4f0PUvQTn25ztSixYzRZlEVFzDtgT6GeH6rqrY584S/jNXV3ab4Xk\nEtLg3yJJ49UWrJctYXwfFxQ1SU3HD9I+kIVobVpsCltY0UMik4lTKl9oNmDu\npzA9Ifa2uoD4JlAiXQeZ8+NTel9GOG8ZCdzYF5ftISDLSJGhWH0239CTjnG4\neoajooScUU4eFuJyHqDZu7ivrYBqNc+uPf6cfewhJu80DmcGYGqYQ0EPA3OP\nYYKB8lld4BmXXDV39dDwnJ34gaq4dwKAnmgsL64tBxK/HaiKTNxZAmkMU2Mt\nDnDv\r\n=68i/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDytwz2A4O2e4VULdMtHh5mOV5gsGqH5mYeK+477oHCTAIhAL2FUHpHtGMm119ih/Ca98X2Al14cKREihvj7lZ5Zig+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.21dc9bc5.0_1627503991382_0.37192364691240054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","@material/mwc-tab-indicator":"0.23.0-canary.68c7fe5c.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.68c7fe5c.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v1cH0rT0yoiDgUqtllHv4T/gNkbP96PnQ4eQ6P583iDNh82JofqEew8SOlkt9nTrdl9BK+GIdE0qYknn1PeDOQ==","shasum":"98798029e6384f0747e41626010b04efe67e49c3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.68c7fe5c.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQsCRA9TVsSAnZWagAAJ48P/Rxnz6/uZUWVWIVMvrCw\nJlKPP2M7NVyH5wCqCUCwUwWFZGRgoOfXX8VB3HzbJiAvNQAUB93CxDqIy3OJ\nz/yMouzyT0n2qqpjA0XK+BqL1IlBciHRccw0JtANouHigRT89+W4mkrlFMc2\ndunRz8ckar33ASo3E4L6/Y1Yu2jFoG632nlL8NPI+3IFLGg+LOD9QfnPYBBI\noR2xIKDLOdMkeTTHHie/1nnJYU8JbA6yomy6ekgu+lBRIdK7uubEuqY5j+ez\niKMTnFm73ThEU+49fuZYn3+eIiq+zD+HtfxJQVsxmhIn8VkVEjg4STLl9hsf\nEYBiTBlLYPvuTuYco0R5K0ZJ/AUjazLAmITpn6p9hRu3FxTtoU12tnEh44i/\n5P+wNFkbm4oPVEf1hRGkGen5RKPrJ1ux0Jm2NRMgrDs0B5oFmYqLYAjE0i2V\nLWxNpnL2tRuLteW/iT06rrpWplw3ygmzGRFZRX/jrOMdpB0CdM7Sa2cayFiD\nLfvZ/0JlYSSRWaGCBKxtNLZcMHdzEaOk+ldOsKD4ifqptMBtyo0DHMlirl0q\nN8HZFld0A+TecqWoMJU9lskUII/d2WnAWEHXwvmZOCfG/YXGBV6eSe32oj1q\nUsaKlWN8n1jQzKaJXg+etD9Rmd/J5n9gPm7mmtSdtApSF1cdYwD6xZNsWXwk\nNrD1\r\n=2AzD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChAZrzQQ/HMSNEsrC2GcBlqyeD5xnyQvP4MwvExam90gIgMbhPSlh5NOrVlimIkzhhCGZmkT9KpJhTxabw+bqx5sw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.68c7fe5c.0_1627583531825_0.7597218427020327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.aebe39e8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","@material/mwc-tab-indicator":"0.23.0-canary.aebe39e8.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.aebe39e8.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vy4X6wLDVC68wpyrKhQj2GgBZrilnZAur3y/J4o73/czJ8/rkoYq+lslEMSM58vDI8GsH3F7KaMmmrtTR9sC2g==","shasum":"078e1c93deb2695371a400123f1714f189854c44","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.aebe39e8.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+ACRA9TVsSAnZWagAAiJkP/21DhSSa0Ll+ujKqzZrj\nbc034iwN7lciV0SBlcVx/u4g2oxAL1LepN5Sg9WDS/ZjkYrdwBqjUbydJnRh\n8fO202iIkyQH/ZYMaUQHljd3L+KWtuxgpyCSEH1hjxKfkXt3X8/FMXCfeIZJ\ncdGhYl7+gN4G5ciARkYh11ahqf6KD98FtvaqnYOoj4DWSXAZvOJVRiyIQU+D\nsBnGKhBhiMldTmbROBqi2tTym6EI03xi1VHD7cm/jVkWXL9DF+hLF5cz/YSI\nUhn8Ux4Uzow5yU8BxUoQwmCR+5IQ1DBH402yz9d3Lst2cOKMl3JicRrH1K/i\niOTcYfUwsFxn3NfpVlMGudydHAPnikjrtClGKG/9G/Tr/N3A/BlFTTPgdG0G\nd5DUee381K/N+eOIYfTFh3zPx6FaV5MkiYpNYpg6QrvqI0mY22QgsVCqhAov\nFSm/Qmx6oEExlfdqbWXlLQb8JR3ZRoh3h9MPEPu3kDuXMvBRV+A8N3SLMc9h\nqqSKAMqtoGtxvHu7GSk7ft4z4Nbm1zyrBFOoEVv/cBy94CgGzQETp/AIboBI\nHblPhIp77lefDnninXVwPmenImmJPcoZK5Hi1cEv9lugUiN15jciLPGe0a9c\nl+EJ7Qfb5BBTcWSUENQj1hw6eeKB4vOg3IA/Vo348Z+s3qYoD1uAfumszp7R\nWIyK\r\n=JSzA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB24E0lSiFS6pGQxlD3g74fNfFzVLqwP1MOKwqjBIZiPAiB15OeF6Um9J413uJ3eXVkZSGpaD3JxagT5Glc9mZyDDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.aebe39e8.0_1627672447938_0.4603938754924244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.ea889c69.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","@material/mwc-tab-indicator":"0.23.0-canary.ea889c69.0","@material/tab":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.ea889c69.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zlArxNCsokhTE6ts8Me0WKyNrcIzuUJrzfqAEsMU80rSpFshuivcAPr0i7pyxgX0ZPcWHRV3duq+gxJ2/q8C1Q==","shasum":"b04169d3465237ed0c15a3f4af62cb20b5a24919","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.ea889c69.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9mCRA9TVsSAnZWagAAwQUP/izZvMvOL73aGL0D83HY\nrkAI3C72G/cCX7AAu3zJg/GlWqPGYxKofjjItrNmntyw29Mf8HRXc/W3Ua8D\nqSaJ1eO1UmhdB9isiSyWm6VMekxfhNmeFBy9LTr29AuRzIudOSgw3FRxR5lP\nv5soLb0jlqkOTRkE1zogeurxebw8CIihCl+jo2F8PXHZFpvoU52ZnUoWzluL\nUPcBIKCsjkHFr0oW4+tWowX+IIGRIM4F/tdV3RFB8Uca7NDan8rCiNX1pYEo\nCAOlo8tMH3XS4D0lG4NNrlIutXrI1uKaoiLlHLOPEshbWt9DxNRCoq4yYM8e\n2jSF0ZkJWlm/KC//D7WPonCz61Y4XAmgbjZKOrOuzniFT+q+vZ6yZod9BmUn\n/doBSmXPaN00DKquwV/ei38lVxUvk09TnD4KnqYsXyEjMjEOBrYi+CQJK85N\nZ9Nhn1P5a9mgTv55twa5BI0M96STLsuPVUHZDUo/svSa0hpyT+BVeYB4KTTw\nq2HraCzxIKKz4/8ISWXz7rvcoD0Tyf7oynj8smvFSOhFTCyTHj6v1k5ehMGc\ne/aSrzkHmwdDm9UdlFZ6C9WRMDeuSXMt8WDo7jd8YfYaAct4PFyMlknE4tck\nathnlv2w17IPR+MgHWZ/M2tRTrLrVaCyWBMvI8cFwXReOrsZoqwR1+4RMffE\nEJcl\r\n=GAjA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeolDiTpa0MEki/lXQtQ75tfQFnl9XMMwGCed0TGj1EAiEA4INLmbts1c2JLdix/BJsJVurECM4gXBQaEnteycMWMg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.ea889c69.0_1628016485875_0.857487344372154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.21918905.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","@material/mwc-tab-indicator":"0.23.0-canary.21918905.0","@material/tab":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.21918905.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Fd3ZD1i1NBHFpIRCD/bkKP/mloWiQgWPUNsZVupXCJ7zvXrvjOpyEDH1XiEyNt8GWueSrrhdyhV12szI9PAu9w==","shasum":"4bcea10de9904f7021b97bdb1532736c730d6fd3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.21918905.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHJCRA9TVsSAnZWagAATaQP/j4VnL/N/4Ft5dOeTy1E\ncvqA1oh4i5zmPqDK2Sqd0LUijW7bgE81y3atY2Z0A/Zofewlr76lRexqgxI2\nn+HGCC/WbZvTMEmLgfWos+O+YXTSJoj4mypTrg6H0YZ1unMlg6c+L0phF9z/\nuDxYy5aLK43odfevJIS2eGD89f8nxA+y75OkcY5hJ+PSxvTwLAj8p5sVinI6\ntMZtBUrdHEFYJo1ABMUE2TCSQ4T4S/W7GaaDy/4tEVdnfnK6/qKaapmye/jl\nR6FGfckqOeZs6sxbzONGBNNBYShDCpaOoRkufo4zgmSEawh9IWBXkhOhheyF\nh942gjXCQdixCBwA3f9DhaYg89QsnsMZAZkzYgnSF7G6X94cREfkuyJEMO3H\njFgCyQFp8pE5Qs5Z+6MWi6I8rFjh3h+IYaR3j8s8O7AK/iEb1MMhd/X8qdLB\nV9lhusglnqDhLdjpoXE4V3xEDoCSj0YXsMozLMWbhUc2y8cNBADcVVuBdhHF\nSyRfz+EB72ig13POZLEsnNE66m1ftm0poaM2J644Zna2zbPHm5NSGEfSg/Fj\n4nKNNoTzjQpVRvRSBRq2tdKOJ2cKPxhi+CuzWemuOntbgzzjmvlceTR6znK4\nEytQRDc6EBrWnPEwRECrDRLrL+C1dAeodNqTCPnedW8TmFAqba2cSZDoBomu\n5hd0\r\n=wQY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4UvGhChQMih9TbgVG+vdTyfmwQo8Y/zXSo/LM8B0uLAiEAui9qffdVIJMicPBeygwW4CtnAH1hYcLU5ZJ+NOymgc4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.21918905.0_1628025289802_0.18036125715578977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.193c87be.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","@material/mwc-tab-indicator":"0.23.0-canary.193c87be.0","@material/tab":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.193c87be.0","@material/ripple":"=13.0.0-canary.7c96e6b98.0","@material/rtl":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/qQPzuIiku/kcknGe+0y0d5szQrgiJzL7iUfF/QjMfMJEzC4F6H0GH8ah/84moWG4FgY6NHb4vuQAqEJ6tgEZg==","shasum":"ccd97fa75ad28e5adaf715e61a97237eaf325278","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.193c87be.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteCCRA9TVsSAnZWagAA/V4QAI4V+FrGWTSFjoc0whUM\n8L/6vwsrv2g7ZkXkH51LQ3U1SHomE1NQwuDrkb+133xv+KKq/tKBNQw69ejV\nWsfErUm7NN+lB5zDBtdnJ9gvV6EakBlJ2lSzJdgHg/XgxsXRTiT+AILGpgeW\nvKPyMqtJ1zKZFr6/K8akij2vRl/lHeK2qIFPqdiRC8xKcJfL4jDrgp76fnyC\nF7tbypJLmqjx3+M0hX5noZgCezaz47XgNmEbSoGowL9KvqcTeUx6A+rgryF8\nEALGajSb1iFi6BuYCUK172CXuFh6Z2fgG+bimxt8d6GMrHwUz3R5nSKwp8gt\n3HJD3Zl8iXtxDRrZmO8o6n9eFq7izhqFO2EKwMpd/+JV1Hfp5llfDrozA5ZH\nTXheYjkmMzt2aSJBkfp4cOy2xnBklJfJvyAW11/cYXO7O9RBbt5bypchOw/C\n0tbQreX+3V+qq8NdK/VZaTB8vORJ1qPsXImpVRA9hRb0mOxzJbWtYUX8BXJq\nnK3qU27gWI9ssc5w7tPBbFCF0eHhgJlYXGD4gQZ1QTxr2AGfI/Oh0p9ZqYW8\nvQZuXujCUjPzHo34uwm6rudS2vYJMwzOHHXoh1cRSCMqoINiU0+6iT/Z1vXf\nrjdoJPyaesHi4o/gntyR7g83jdNCSimYqBMge/jt31nkUeP/Al8Gzotzt5Fs\ngmmb\r\n=wgrY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZ4V4bW+VFRgnMGzPzSa8L/AVXAACDFIRI+Zq4xMwv3AiAaj2thX7wOY7V+rp01I0noAMrEN+etqg/46O10HU7xyQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.193c87be.0_1628100482110_0.40493755202091086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","@material/mwc-tab-indicator":"0.23.0-canary.6fc52d8b.0","@material/tab":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.6fc52d8b.0","@material/ripple":"=13.0.0-canary.3dd611091.0","@material/rtl":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e6xUHHBRWbRnHw1mxpH0iOSJUKdHS1w/OBCCm6ME4hDnrJavY4IiJvwufZhY0r3LC4AOt9PDMEX5doaUR71hCQ==","shasum":"67325cd16e686597d2ba68a9dbf67cd23d2e37a3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.6fc52d8b.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnDCRA9TVsSAnZWagAAJREP/jNw1RCrieBJLg2l1D4F\nwSQKCFnTy0nuGFPHabbvQOMe79WBKzPVVWIbUEhHU78LhuCsTFzDIjJ9R3pg\nBxZl+RgctFcA1PZ9kJN39gv7pOMbyeS25xqiDUwAeZuvx4PEdULgoGCSBy/K\nZynD1uc5nJiy7bqWvm76KjfrRBNX4l392fRE22UVoarHXmCvUtas7rZGJCLJ\nxBlkWEh97BQUyQIStAFKWoLZpjwIsqsnMWJQ2XFSS8cvNKs6UFQ2A+rYiwaD\nL7T1ILe8Th7XFSomX4rRlWVEbuqi7jafXcg+pAdIOoZl2wCdG0ygzJ0iRe2U\nXUWbori7DSIP7D4l19eCxkrelwiW3S+sAJGqXHt2sbXNYHkjRMQg3d1ICXEo\ndqV+FTV2nBjqIZZtkntHCfngnQlmme00hKhiafGsrTY63WX3lbKSKNFfyXDA\n2FMBUi9gbmuRgU96Vmden8j5HJxQ9kJ752L6TxPx9XF8lGXELzBn3RSlK0ei\no26VU9WqITbzKFaay78dXvOwVpEbcwOLEoWOzUwUtvH5ZBlh9efTDKy/HfuR\nb8Jsqk9G1nK7grCA8KdGv97rwZdC2d1Kv0a6WUXleaIzy0enjYfqRvVjmiup\njpDseLeSIjvqWmSJLRgGcOaPEiO9Jmy9xAkY3VM0XW3WkFGAQa622FhxuOOk\n7Hho\r\n=Zu0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/I3jjlcgwRxVeBmT145UmcYDEjv9yVmXuIDG2euHHRAiAhRkAT7qYrumJYJ6Zf6BLrUWFb5eX1B/oW0zjweXxbTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.6fc52d8b.0_1628187074920_0.9676582515049938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.e2e9777d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","@material/mwc-tab-indicator":"0.23.0-canary.e2e9777d.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.e2e9777d.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SznQmuQZiMPjzK+syPOw85HIX2lYdYrpKu/VXyxg4bERQectUw5Xjel/Y8Cm4m3wrNg16KiS4Q96tWCDRursxg==","shasum":"bbc4dfba2e527f24283214db08f7ae13abb6a044","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.e2e9777d.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqWCRA9TVsSAnZWagAAP/EP/A4nlFnAfbDxBdkSM1oy\najnnKSnfTR5sTwD4gUgGoj6Wl7rWCsRHaePovb1FjM5iQ7wKTBDfdh8trZNw\nxjkSLd8+0vgbt6UXSpjgMOeuWpdtRK/3D//cw9hdZkhN0BA+OwTeMYk2yZ0S\n8I1tzEdW4nUzBNLjSacD7KKR816msPUYofTwJ6D2NelvFdgdmMVbDGMc7y3c\n9PQWruasZYvFbv5GcXHenDrAp51FeGf1RW5mr6+dCXK34443nNteEyiRiX71\n/tN89mi4RUHDD0vkdEra0r4yopNvFvgBzC/SeJSkr+7/oYh5D34upS8FX2Zg\nYqEGQtG+1TA/IGO593UkF9xO9ubn59UqE47sND6jmSIv+gy3OAARiWxwssWH\ncbDkcJ00B9Aux9h8BZtFMwWl/7ZRghEL5iVpjlZ3aA9A9b+0wTTCKsuSOmUw\nfvutpPPo0wuQHNU0mfZOU2RNnZFbNvMit+p7CUlSIwORupEexER8yVOlfees\nzKEaZFbny+f0bs85kxiYuW3xd0NTr6wOJeAo9opo0ixvwTie+GlrSDfxqP7e\nW/b6tj7/FoRLLtAxay6ifCmmD57k9Bk5/OCtL3g/bmaj4p6fY3n3Pcb5lfN7\n+xq4tkztFu7Q3WtKNnxBIfinHnZrGORLT5zI9eVFKYu+wwTJpra4QvSv/W4/\nVhEn\r\n=rhji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkGPatA9A46rWqJTgNmAODU/sr+kAKUriyCwM6XuXR2AiEAkBVD1EIhGct2NRp/6CPDZA6M5r21X4CbxcoJi3y+GOI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.e2e9777d.0_1628203670867_0.8840470472686288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.72ff1e68.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","@material/mwc-tab-indicator":"0.23.0-canary.72ff1e68.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.72ff1e68.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xrf30+yGsGONObsRvMKOfOGfNzgkSY2jK0a6wm5pfe5/w0ikbkZ0qRQ0AxQ/7sxJNVwO7F7+Rq94+PvEaoNwPg==","shasum":"26a8269a7c3ae2bc93a7e5969492397b07dd1354","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.72ff1e68.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBICRA9TVsSAnZWagAAm6MQAJl9krMuA3X6D39UOkut\nIyRyWtBHPoDyAQFIqT5m2Bgu+xmK/8mOtZAjNk7qymz9kIFf9wdh8XfBZljG\nWXgZ26GYf0YH3aozwbgVHMveqUMjsyULRhhm0NDqrWdoSPbiv0zqTJQ4SSep\nsvFEMIEj8R4pGcW63Bk6N2s1+hmVoBPihcQRptx27T6fNBvdKnIkJ9j2Qa9w\nZ1cJJyILDo1oZBOlyGxpzY+LBa/E0ZRpsmtCGQ72ZnfcMQyWOiL79rYuH2S8\nPrzn0HOUhYA+HPkpao9GwKvG9tE64U8RX2q0qo+vL3Kex+8+TnSYMTlmn+2P\nrbdHG4soqr3b2jkAcLHN8eeB7UIg8ub+a4l7psaQ4JL/k7gX8v/hWnvTnFbt\nM/Neje0pbLLqtch9ETzXZnsIpEoeDbuNE2UKVSwJ0/ignHezyzTeiC5H3uBB\nD5EofyU9vjmS360lZtDauCfgFzTlw9rI3i2IUx2A3zGPx+X+XEa+DUerRPf+\nRSupeY/vggiN1SCDiZBHh0kGtZLBaqsoJ+7sN+xgXNcF4GAvNxKn4pLeVC0V\nGr5Un4rnEvkW4xyBKVs5gd1HjFmh4ng+z4uES6w+tVVTse80TljYnkXR9/my\nP9I0+O78k5R7g8C6CVs3mEC/hruRjVT5X50HElSeJFpa/oRMMTuCv6WrvkMI\nFU/8\r\n=IVuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6j69TURvubGnlwwcp7VYOq4GdFo2niWxl7jJ7JA8UHAiBJJzbWbOiQ8NeFkSy/medJxWbtYQLUmhyMW+dk6lsY+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-tab_0.23.0-canary.72ff1e68.0_1628282952212_0.37474871555748224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.c527e93b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","@material/mwc-tab-indicator":"0.23.0-canary.c527e93b.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.c527e93b.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FL77qCtzxvrCfmuur8Hb7Ppb1CyYdDjg7JQBuf6D61nIW6x2UloVhVlautPJE01rL2OnFUoB4pfAe7IKJMk20Q==","shasum":"acfa966f8548733efb72e989e25db90ac868ecbd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.c527e93b.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVdCRA9TVsSAnZWagAADXkP/175GDRlglnHZNNsvZNd\nA/MAH2gUaxLaT09GYs2uw246lvj/e7gDjL6fVVRjf/FHlxdOtuuSdxtudsh8\nWzg+Hq5b5+VJg5N/kUPP56tQc2CSjhM3WM8iiRkyloxNDIJupk1e++T3GhMn\ngwSQlQaDFOlAp4XuNA668T22C7lgBterolWASdDq63EbpAU1KOeFeclKizpo\nbY83fNWIEwBibpWbjHaQt23LZ9DfK/XhEQVSJNvQ+AzpBHzBFAl0eBYMWrmF\nFwzP8Z3NzswA0NjOkRZyCE5wXS19j9LQo0jW4jpEInXaZpm+rs195ogYN1f/\nL+gLQx33tsX5ziPuUljIITdmmVHuxA9XLAYz0U+2JYxEQfMWNVXpuWB0uejV\niErQXDbK5VuLIBlj/6YkuXJADwMzyuyfbbIUHMSoURxX/7Y2n913hk3C7eDL\nD2uq7rmBpuNxedz3B0O5Zh27zJj3Bl0ZEZzdjAnyuun1Q6b+QkdQj/5J28hf\n932XGIkS2+/vXxyKVcYVjeNGwzTkgVvCg0qsUDEe6z3UnPrYjOupgJt1qErq\nV92U1JceIn+hG8HLSq7BQ2qNBQyVDq28ouYkr/eV8qlZs16pvTdOJcyl0ruh\n22zhEDvT3Ql3Ex8w9E56IQrnmyW5oHSuXd9w8Wi6nyL2jKqwD+C7lbONwvb3\nOB31\r\n=DLic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq7FpL7hY0BWW7+ju9FhqYTkVD1OBchuvFHpD4p6FjygIgTcEWgbHCVXUSXJrH8t4t+cFqj2Nrt/QGIl5nk2n2J5U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.c527e93b.0_1628284253050_0.4691365696264236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.78b1eaac.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","@material/mwc-tab-indicator":"0.23.0-canary.78b1eaac.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.78b1eaac.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YLEiR1ESeSQQpcbGKtCIuaUNu1rmPCV/Oo3hWey5yW6suXz9q2LttFjNETCERr7d9l6Basi75pYxyXjDFNpLUw==","shasum":"b962627759024d2fcda6cb5c8ea4e8a19a942203","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.78b1eaac.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4eCRA9TVsSAnZWagAAlGUQAIAOKnHzNpvWdZ4g5Vxj\nRvYKRdC4/RwRLbsu9bqAsSqtrPc5vCpN7QQPCyehsVVujn6PoJZTOiUHXZus\nrFEkg9P9FIG66NTlhA4HIjelExaagMyYB/MKvFMN0CxipsAh5Pm9kEO3gWp0\nwV43nAwcvBF1GgKfla8eXDC7IBSBPk2+2LNiyTm+Ad6kvRg2QIgVZ3NUdcFN\nvXJdIPqInJl3BPsElekHX4I/RMfyi+E2KiffrR9t63m044AmRV7JbPXaYSF1\n9sx7jL6bAlPhOXCEGrImWSe1+inGv0G/sVjTytovUUqbXlzd0TltjihzPEV8\n3AhrOB1W4yYG+gK5FLoD+vE4Jn5OzGon5qgBxm11eQ6BUqMvPW8w0RNnfUjh\nwuvph1Kqoz52QFh303wDsJoi66fYie4g5007CXWZwOpnek1TT8uKYWnEegH3\nbO5/Hv5WRYwLtoooUgDJ2OiC9+AkVOKYtA6h7bhPFrnAzOkrsyBdgGxzuE3z\nX/msIkVPN5q2MaSpv4M3zHGHxDqWh5R7duzunO6MXyrjESNqutMKn7H30O97\nqye2KT4vQebW1UH7afXN7LHhUfZq5eP7EnwV8OSlN3wwe+1fcFXQwCnjPugj\nAFVXsNiXcrbX+xzul2ql+2O+5hgfNKAiu6o0LFoHfBQfYTBKGm+fOuVhDQHQ\nYbNy\r\n=q0rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA67E7pveWPaNETPffP1R7639aepqSi4gDAWZtyUFIGAIgApYGqjt7qVwgVqvjVOafTqwvDElq7Xpa9EIRjqlRXNI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.78b1eaac.0_1628532254766_0.995537804454308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","@material/mwc-tab-indicator":"0.23.0-canary.a8a4ddc9.0","@material/tab":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.a8a4ddc9.0","@material/ripple":"=13.0.0-canary.7249a3060.0","@material/rtl":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JQs8ClqAivpbJ65JADh9FJFX5M61THg4zoKRtgvLqsY+S828ZkgOTa3/Y5gysTzMwQ6EG3fXYyszgCJS5wsusA==","shasum":"1f9e86a2af27c62488de1fc882b1ab8365d12040","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsm4CRA9TVsSAnZWagAALwwQAIpYWOw852cysHr9auN4\niTrZ7flDAO2ogUnJCNGHOpd9y7ZTfefwUWX+DyklDrq7EtfnxFHpc+1YoyG7\nT68rraqltq7r6C5OOtseAHFL+wWSFyA66+6mF7JozKEGfnhy7y5IdHlmCvtN\n6vUbVnRDVQqa2dqWlkSOa6puDTUT+GiUqMHG/Xl18dAlkkZqKutJgjPFCTfk\nRUvfI+7L2iBraBYs6MU/EMmQacX8U/a13oJtPwhJBGH+2VqT/bBParowW/kR\nonZ4yew3o2Jmy0O2Z3dL4mxAaozDQq9T3m1NpgbV3OuFZ7WAmQM9MLzOfcZg\nz5PlaZ8VL8ahg1GPynjQohooRmVm7aoaOJQzrbGYqOV8gJKV3tBQfGoSTUJ8\nxxQmn7pwLI0AaAtiHKvDJ8A2zi5XD3zHskIpnLhPUkSFbfpLehowqi09isoZ\nP4xLLdJXlH0MAkkKNVV+jKUo/sMGljT7fo3dFfjRlmzSDDD9WkLdT20f/7FJ\ngtEOkJ+uKf+XxSEhXOIya8j5x1dVIWixNRwrZ6cVkupbBjlvO+rAynngnWLh\nzqt9vDLHJLw8LTT+xBCoO7Tw0xkFwZroF30j5tgqXYbD0auZk3QduMXozHXs\nEpw4WkxJovnHXR7122EFgEukK2yJUcjSUBHQZYHsEn6E2/dNL7kiQ+nNF+ra\nbNwJ\r\n=RHvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGY40uAK2qOXq+gm4RnYknf9zw1DuFcAF5QA/dK+3m2oAiBOEaRM9MEvHGLyo5wAEV/ZJ1DHhag6gavlU1nla1y69Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.a8a4ddc9.0_1628621240416_0.9376219687406224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.99fc0632.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","@material/mwc-tab-indicator":"0.23.0-canary.99fc0632.0","@material/tab":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.99fc0632.0","@material/ripple":"=13.0.0-canary.f4241a42a.0","@material/rtl":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Df2HdneoaTZRwNcP1QZIDDT9QFBsudwmR4BkLKrcf61NEhAwLp1ug7TbzbeHGKl5JxBxzdkn4/wrdqocDgbDWg==","shasum":"352e5d298c3f0843de0d54b0825375fcd2b784af","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.99fc0632.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2ICRA9TVsSAnZWagAAHsUP/17T5eo/RIFqHxDcOVOg\nE95VYrkCVxZ+HKTph59/RVsPWIzwA7WDFSVba5FhmvNdzzsgnMlZc3AU7fFP\n5pWNdRE4lRa8Ha3JRMoWNBFB/EvyIIBsygkZ8adHEmStwiEEXtmQjw3fkdo4\nB8bqMRZygsJiJadjL5WllVg9iDVRZNWV9dcYo5AIhtwdHXt3icneeSwpbJim\nQyfg52SoUDcw1EiTUvMLYGqx+uePs1Gr+Go1eNY09yKM8tEZu/BqEIP3ndtp\n2rHYQmHmw/r8ghv1wfPMpe9Zr6YNXJ6Ll/uQFKWFJERepa87H4CzMTcXhf7P\neeXQokoFV6DHGv2xNKDm0BogkfKZ94up4yutXsEn4mR/tpQGKz1l+926+ayt\nmXyQE+5zVFxSVyu3iVZStaqiYfZAjhag0HmQBeQWEJxT+908UxXX26A6Vb/A\nxdKDE8IKmNEJIZDgObeSdP5NursSg5G9xs2LayneobWtk2kuSOC8B76o7xKQ\nZu3UnmbPegiCa0AVFhE1K8AMRIGxnkTeLwX/87gf8XPfRuYMKRM0w3Ahuyns\nWkTTnbrkTokLz1l1lR3/kw1PbyXEBh69IhF36vMmoazQayyhsFdoqeixMqTG\nbf5js9BrP+XTcNDq54i9k89HJnM5ftglaZAR4U8T715rU+98FSE5lHUmeOg4\nQEXI\r\n=Gy5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdCbFyBNQsyKFq2mAY42dUNakzupi4ow7zyLUJ3b+TEAiBM0IHt6lWMU/gbAkVIPOcYpVWDrfXc49HZX/f8pb5vhw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.99fc0632.0_1628720520271_0.17358989588174523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.3f47ae57.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","@material/mwc-tab-indicator":"0.23.0-canary.3f47ae57.0","@material/tab":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.3f47ae57.0","@material/ripple":"=13.0.0-canary.0ad12ed3c.0","@material/rtl":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jbexC+GLHb+MoUCIquYVM1FYjCkIseOoIdcwbY3iWyeh5ol0itA0A73IwDNWgnURaw4WdgFnl3Qt9UUB3R9K5g==","shasum":"93c3cf54fb48af71c74c80aeb72596bac5d46157","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.3f47ae57.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWG4CRA9TVsSAnZWagAA/g0QAIOtYrn/1/4foCPWbJ1K\nNdKaOw6dnUm9pGq7K8H2Gml+Mx7CHLL0aALmcgFhS3Xqgt/9AFSnP/HrjSZx\nEx+tQ09UnDXGEs2LOOKtMObZ3MqDm/G9kiPv+CTzYMsRNR6mzgTJu80F9Rd/\nqkGNRhBiyEYFSD2pweEOmzl1TSfmlxu9NvhqMzhC/jBEXOxH707NtG83lc4Q\nNkRXCgmZ0cJaZ6hIEMLqtVQ/v1RtkQ/t/mKTo7dXnhCLrCZn0/kaE/9cZplP\nrxMFqJ+7MIulpFG/1vjmo81AEgTg6sFiIVUl1NXSRxwMZVMl4roTdWNmuV2B\neUHbEakz77xW/PBFLYZ9+69y4YRhk9VwuylKTazEswM+GGpye+XOdsxD/jYF\n5fokLLLtYBXMHZ9rFigV0Z6E79X4H5R/jZGQMxfVk6YuBZFczaBtMosu2fHG\ny247hdb2wLGGvCnxAqSt6rY5lOzkwUMmDYQbQcB2MhiTvNtcX6Nl0S2w2BU7\nK9J1uZE6dXakaD44FX/voyO7YbCFnjWqJtosqzHQ+YAjsp41NeB6bhTeLUgI\nI1ffYPESbLBV2mccvOtwd8wGI6PQSiX/XDlxMHx2MWeXLiK6y/6zKlR9flqg\nYfVLElOX7x2EEqVTZqi6mc1XLI8tATrhjOTHuO5WI3pa97hGZMCfAQ4ruaux\nPmGA\r\n=jyCw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIaI3OCV5heuQcqHa4J6XKrd415ItvcrZdFZj5JdrtTgIgFR1H+rPFB0MYPg5wGVUtfhHM/ubSSo0m7zU3lxzVM1Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.3f47ae57.0_1628791224441_0.8498740374391291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","@material/mwc-tab-indicator":"0.23.0-canary.6b9bfc32.0","@material/tab":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.6b9bfc32.0","@material/ripple":"=13.0.0-canary.077dcfcfe.0","@material/rtl":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5hbewMbVlEMeRfdMqTSFHKpBpW84thR/F2iI+1nHplo+05SfEC9LZW0WSXddU8ERfZUSqwFaBU8QDybb468diA==","shasum":"ad29476ff81997b39d87da9b1c36b025e9e9ba6e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.6b9bfc32.0.tgz","fileCount":15,"unpackedSize":65943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdkCRA9TVsSAnZWagAAb4IP/0tRtkI1hgDaOB6ozBi6\n9plwl0CYixXKHDu4wRmtnFrOj2d0iZBDPLWVxZ9m54lyaGHex5xs2mDv+zM8\nAHcFIgSh0x2+XE7Il+tFZDubZWVI91qhpkZ1O75xscxhSOvQGX0+5cmDambc\niaxtedxhYXwUHdMwk1RKev4dcjrIkXscU6xWlQXPvhicJem/9mWwivfK+P3k\n2NvmqiE1jXqiI80HwYZUE8pSFVNufbZUQA7C4BobGKjSw6p6xFopyLEnMqEt\nn/BHgys9roZB328HTVVXJOiOgNxgNWP0MZbNTkCjNxnePbNCWXBW/J8B1wnE\nZeeWNDGyNljPPzwNeWdKJVmI2rkFBUX2uqDIuDFf3lkIxAFYpMhQXD1WULIr\n9fY4P1IMpt0xhDxA4T2a0ScZs5PnJ0U5mbBjjdK3UomK4iTzRQe0DfBQ4Teu\nxCP2dIUlPI0oRVFPCkNKwn66q24ldd4Le8XtiRUkU4Pftbl7aQY1BX97doLh\njFYS40RQqMtd83OeFymspP1Uk/gtmAuokCSIf1IfPHjjnbP5nwsxOMjKss4c\nEZxfGFyoM99DXBy31edqJip6LqZJ4yi6BHPmpPnwAKVvspRaRy4fQJTLExjd\nPc7XFqow5IH7NB2u2wzb5HEpMUGNvK287wWe53Z5M7GBvP5gBJfF/huYLcL2\nsoq1\r\n=LByl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICa2QpGWtye3ruhonoR0COeu8fHarAtIT8csBH0C4vC1AiANoql/xA8103FQMlfDSv7orbj0rb0EEAVNYGUagHOp6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.6b9bfc32.0_1628792675929_0.699838845428417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.c89ecc63.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","@material/mwc-tab-indicator":"0.23.0-canary.c89ecc63.0","@material/tab":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.c89ecc63.0","@material/ripple":"=13.0.0-canary.2fb068fb0.0","@material/rtl":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4Jw3800eyjGuVOCRfHuRVNrbO7m6X81MvnG32YC7frMg7dnI7KW0R/guWSPT45+BLaDp3LiNjfGXTCbqg79tig==","shasum":"4b47a474a1bfb5c9560f91d1694f00620bedcfca","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.c89ecc63.0.tgz","fileCount":15,"unpackedSize":65922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2gCRA9TVsSAnZWagAA/v8P/2mVOIJJLh+eutqhjUCM\nQ95ZgMxArHhXfIDHsXKvnCzd2CWm2VMg4RRj8o+clxi3Uj2L62Wu9VjKkgxm\nMrr8DiEASlZ6pJfIwUEKA4KhhKrXCxk6LFI5YU5LcWDz2kMp4lQ+xQK65bBU\nGA5YEtIUFxZ+R4pephK7o1fC63nZLlN/xSC9YpmWkV/pdOm3jpPFZI/9ATKM\nrR6E8SGChGE7VuwkGxrYEYkuSgMy9nBZKFKN01sFUy5ONfVwsf5jKuOkyJ7D\nUZ3wpNQ6U9TRrSU093Plj4ovcjQo6kg35Asg5LyNid7YmdwkMa/w9VM0rIvz\nN+sLAUACrZIM2g9AFWxyCjM3hWQ55t15H4QHqq3BcDekl6o5WOtWVzYuNs0b\nx6RXnrQh/Ybm6tskk3uAWyExnVUhwgC/IGNPlZe5jRygJBFyifRHhjHlPdqj\ndry/0ol1aXERGgAoVdUi8BMHk8I45IoLyIRWiJiCU7MKW4M+tSHYlq19w8P5\nZjc9KsEVpJmC3YprPJArtLolyY7CfwBCqS/5fF8rRRaEjMAdgaY47Whr8629\ntHxMvKAO9JndQ5IyVIN7ES1fyYOlx6MBRssTcvccchZhAaMiAmmlCmVc3u3M\nZFmiT3LO4nbb/uVlNUnuamabSTbCwW/v/o9qkQULVSHPT5USFWnwQWwq4/A3\n3xOJ\r\n=uNP9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlQzkR4GF4VLmdGg/h6TEX/klUKoaw78oQTFQJIIp5GwIhAIQr8ucyVhn8NhIDxXIS4HLQVVO4i189tnakzMH+QNQE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.c89ecc63.0_1629134240082_0.9151141172642661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.59de86bd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","@material/mwc-tab-indicator":"0.23.0-canary.59de86bd.0","@material/tab":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.59de86bd.0","@material/ripple":"=13.0.0-canary.457d89aad.0","@material/rtl":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h/3tL5p/7suQmYv9rdazTa7Hhj6xXJv9PnHh1NGkiOp3ceZmIhQ29Air5ATdO57NErkkIsf8Q6mpLf26vOeQgg==","shasum":"4582712d46ebaa395ad532c2e35fd03d52297795","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.59de86bd.0.tgz","fileCount":15,"unpackedSize":65922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSnCRA9TVsSAnZWagAAYE0P+wXoMRs+7P2e+GbqIY47\n4mq0Kw0Ex2fSnwh3vPeqCRRhAl7rdqiplKOrTaLtpMCAfZ9m3z2AfMHr+yYW\nvzN/ss3B0gWad+2CEswSegF1wJ/e+K+JbQjXaXreQtbHXULJEaCVu87PNeM0\nLhiRexj2mdffAB8idBMbZyKaC9Sa73BlT2Lpw6hmuYQJZZ8UkyBfjImygUlN\nUpH06OoPp9oBe4Kd77vtySPW+vcn1hLlNLaGNKiSGGlCY0/5BwZyjq4UExR6\nBCH8q6ubp9seoME883eW3lEavg6fxy3csWehp0nVxIKE+nQosLGXZqRZOHdI\nA0aKQPb7S3VbahPC8Ld6zSuXJaLOHg7vgFsM/6b3KL75zdDw9Xmpwa5quvYe\nZcyaYOYC7509Tcn73mAUnFuzXFa+LA4E1xlDr+kKOb2Q4xrBVGAzvZ6KgzvQ\nVXRwH8jn4OVA0ikUFecTjYPb9X2zxA+EGmSH/xE1S65BOt8dsE+AyOk97BcK\nggKPEqjiUPpGPttWLdt6v5/c/chThLgteSpiTPrAJ6Q8c1Awnr7DByDvmhgb\nxu7jrVkmiOlLzFBDPuTHyORJNPnamO/NvsYmcmadNxvNDOFMCKfnaQgNOyDw\nV5DoxczAFiJgau2HT8zQsTswH5f09ztaZD9DC3v4c89eEgKP0hs09TXTmEhS\n8n/T\r\n=s7sA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAaakbyDkjMsa54wORfwA2ehZp+MErlXEh9iFMR2CJ9AIgUA75A/HJ3X+bpHT073DLbNr8GjgdsPGgUA79SKHCcNU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.59de86bd.0_1629250727663_0.7330481585171253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.dcda879b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","@material/mwc-tab-indicator":"0.23.0-canary.dcda879b.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.dcda879b.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-components-web-components/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iqLIRQWXR99pHh0OJfkNAIxlsYOHGrfi8Sij5GHo5q4Yycpc1IQbHtB5DYb+X/ne/i8SPZz+SO+8rM33Cem51w==","shasum":"e2233f6c2fc57850d027b07f3f404e16b5f9f5f9","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.dcda879b.0.tgz","fileCount":15,"unpackedSize":65922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhsCRA9TVsSAnZWagAABwAP/i4i5ZiWDRQ3sMmYf8Pi\n9Xl09NYqbIrinh6MFRivNaG1cs9AmgX8rerbuDg84Vjg8zgsSOqIHL3dNdTM\n1zj+yJk0JnK0RwT6vZ9VnpSYY9Z8MGmrNjU18A6czRbmFo2eZaZAtqxptikS\noSmcg+fVRRvSGk4vRLp0b7QGTpGtD/HbXh1CGEH/L55ELg6ir1WiwDYC6EZr\nf9hoVJGV1995bZ62SsmIDdTgEiOOy3K/FMnhzg+U16AK7jYUQe/QzjkOG/Tw\nkp6GO7BHXEQGEwG84GxtNAZhNpoTWfJNI1XNb2DKv+gJlDbc9Omg24exD0bP\nj65gByFkXcMzQW5OFrxLKq+HjyGYCePRhLmp21c6Sej73Oio//6hZ4hdri5f\nr6xC6NMs8lAZ50op1a9vsbt243e1IWuLOxAdXSw51V9cYJApwcxBlAtXSwOj\ncOyKAHTqiwiC1Z7FTXtK6Z9fjyAYempWDyKPs00kojLGEcAYOQylBsOgfKu/\n/7DmndWxHavKbG4XdzAECib/sQEkMPaFBcmRzrf4K6CEynTi1nQQcWNnlUnN\nMqBUYbZhRvm7rkAXEePn4vV1zZAJusRXFM0kzU1bTTRSL9F3JTE5gsQZaBoV\nSAiupU/Rd8n8vTf2I0dBo+B/KcN/uW2HLsr7nmUfopMHtZ9ajAty5tXWUSBF\ncYyF\r\n=eDZH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC56ZhBSHKaFi8lfvxlBsViu66RCBTodGeMrv6JDcBxFQIhAII/a7Aig6riFI6egSiXakderrLihHdh89ePupcqit3S"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.dcda879b.0_1629325420396_0.15606262043109664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.dbb8b366.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","@material/mwc-tab-indicator":"0.23.0-canary.dbb8b366.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.dbb8b366.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NiRQQe3PJSUVloEHhWcgsYzK6TC4ebxZr1gGaHelwma7lvRiKZweGeMMY/tp+LSTcRz5slsxKcUzf7PW7rJxRQ==","shasum":"c9c5008165ca72a54961fc2b097de5a892289527","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.dbb8b366.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKbCRA9TVsSAnZWagAAL54P/R/6GXiW76vpovqPPKQk\nOCCkO0jKSdUy7YHzVkR0Wg16q8Qwac1m4lWVK8p4Ns16Iaj/BX5VW/YDkGdQ\nqwL3L3Tnvy5+zVd8Scp8ON+LsyBVX1NJBipoR1Wd6wI86kRCb8w9p4Sro1+8\nWyGj6KPipiayKZGT9WVKm9HvsB+xKQKxJCZTssqYxJ06e0aCsghfMx/n1O5p\nrvb8+cJAtIY3VSv+CA7DzFqavB7hNzHtpLg6yZp2giQ4DUoj2MhOwrAqTfwl\n7Rzup8kp4froTw6xGjgMbN6W/eYtcVjUg43WoCJ5OGbjDtmgMxF+NQLiB4Pd\nKUex6gHWso8D2NQOExZc9V1x0nqj4pkZWsp3NpSJJGKw7umK4gsMBzAQl0zv\nY2qb4XO3rZhvP7LtkSdJJ9BIVJyBbRV2J8f5H0SvoZNnC6AeyU96B2CszmOb\nZD/SmevT6JHdTh1L+268rk6KvlL5MWHTYJhSzrfX9mF8rnmA+SF2SbLuScHN\nrTmM2wmOmD8GZbWecH7Izqtfjo6PGmdom9oRMlamu2GM/dfYITVuiirrB021\nVokaovZZc0M/N4v0AwTzHhL+T0nj65GUGO9oxGhx0ZR2IbI1g+sImZ5KLlu+\nSohezYccwR7C4fJzDeb+0nFq3tC8E7ppms7Uf5TMZv0iI7/c0pT2JI7QvgSW\nq6G3\r\n=d6bn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGY1Qu5tg7lvzuFjXivDxBX6kfLfXiw6Whdo888211a6AiBugR438LVekOd6DUKy8XOcP56iUplsQDr0YkHihbSmQQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.dbb8b366.0_1629414043256_0.9533969837881808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.c6e3060c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","@material/mwc-tab-indicator":"0.23.0-canary.c6e3060c.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.c6e3060c.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZeU1obx+xJaVFMKkLusgq6m2eTnATlKRSJivh3vi4BOkewXLd70Z15nMTW/YDHLYQ0jyAg0BZ7ao1TenJugWuQ==","shasum":"f1e20e9d7fb9f0eb433c9143fdc4f9a16cf0a260","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.c6e3060c.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMKCRA9TVsSAnZWagAAE6sP/0QsVIYQ7GeOos4vDJUp\nGMHCbTCCiHZ1ewC9wM5y1EByftpWXK1JbBt//7U9e6jCVySNnhLxWOc5Wv8c\nTF2mgHRojDSPWrPVoWRhe7K8V6KBsj5BIQ8H9DezeU+4kFu2HSp0umn1eFDC\nywXjrE2w/Ct06jczSTJPkDntvbyVwoikUh7iC7fTkGx6wv0sv4Y/xAFUu/4J\nohbx//Ve5+rH9ERUbPtiv6NzWxHTFRz1PPwiiUT9fdCiRUEEOUQDZjjuN4hC\npED03sj26NeKPkPqqMEjNeliBsx344xd1gI5T7FpUErWfwr3zKS6Ei/MY+YJ\nqtlqJJBh9ka3uCjeCnHVBPqy0GjCPJg08blVjWZAyf+wpUkwBL2HWN44h45/\nFyzAc+hXLKVh2zPsgBPfEgSIXHhjb0ErW0bLra9qOyf7GhVEIxk4R3g3Cpav\nHmT42lOnNJPqk9C7K/DIXmse/LwQa3G3pYh6+Y5BIRfzAt4oCvXYDNbL5doE\n99mpACZJs15+R5TN7ZHWeQEOnMy8d4AJWWsqEZ+hYEjSCv8zEK43x218T5rl\n+CPyVQYIbKvuHdhnVZBZmYSDSUKbL/7aruQB1vqxu8c8gnCUAOqpNwMgPH+8\nRpOWipluSztTqwA3FMCN56+rJq6jI+dB7kY3oL4IcY21q9jDnorPEfkaoB2h\nhIRC\r\n=owbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+zbAtLgV95lNgiHpuEYXdaTasZ5kcY9inoGC5VjWPPQIhAPu4Yb0h2I8fTu7qKgLJhnBB9O/lJQUZ6nzYjrc50bEV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.c6e3060c.0_1629414154185_0.33357122007975715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.03120b7d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","@material/mwc-tab-indicator":"0.23.0-canary.03120b7d.0","@material/tab":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.03120b7d.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-No/i9Vp6hEawc/IGLfWo8rSO2vjqTBeqCTlDe+JwzrujVT09tVmgYTRR9DSPfYLBRjRONzTlTXRwlQyepUMOJA==","shasum":"335c61bdfbeca05882963dd24e457eef4e958789","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.03120b7d.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvb+CRA9TVsSAnZWagAAiDUP/j3dmVfw2eNNxXbobzUU\nsNxSmgUJDOw/RZgj2YEQe7hi+fuYpCF0fTRGXpZ7A0oui3OcMMAEoVsJ5iiG\n7J6damr7f4ve9NkL6vjnsuVKvUBxuYqqwOZtk+dDQz2VfjQwsXQCydNacwLx\n1Dv8VDZydvol0d8zsd04+uCMvlKKGjJFAffI4LZfQX6dFhRxi3nGkKCqQqiM\nnaWh0+rE7q6jhYS/O4mw0s42wwY/qEzC0EUeMxSq7mHWeZYGtxZBEJfq3Mqh\npncVN23L21KOgtYSIONYYvyR6fsZHU7+6L4FYJ065DV1vsKHhE3mie3Pgk8A\ncrOUhPbF3GTfF9hwKmFGL8OeAo4TEGhuCVL3QXFe+0aaoAGWC3xSBRXu9mx5\n/WSEXG3bqgXbM1sf0NOWvUyrY5RUi3jBgQLUO+s9XJDvjpc5dBQHoBBeMzcp\nduaAz9f3UuEWuHiYAFPxSo9UpT6mJuDcUIWhUlxS7B7b56ZHcc5btwpQ/RA6\n7bKDW2jo3sd0RRlntH9I5aSCeZWFzrHdNdKtAnbLfhs9SvmPHPjXs0FeyqBc\nG3/zvh6m3wxcmPCxQJzRog5+oHGOrDTJdMQL9HvHlHzwdp07Ugx/noGJ8mE9\nCsPQCpIgDO+jHp7b0WmHXCj/MKtENxO6Yw1iuJlDahNw6uo0cuC8P3l9arZ9\nATEm\r\n=XoAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCec/856rtK/erF6xcUUG0nPNkS+HtI12Rj2OiaxVSZWQIhANPWnMUWKSNCrhZBB7CezcbKnpXUyA5tLkOeFotkwjLX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.03120b7d.0_1629419262319_0.7370795062366098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.d75a5f74.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","@material/mwc-tab-indicator":"0.23.0-canary.d75a5f74.0","@material/tab":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.d75a5f74.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gsjhqUZuH7rGJWE/0748pcCP5I3otWqzn09euJRpYuq8Q5sOR6KZA1RIA+quK6PgIjIi8g3091zvVT4aVnle5g==","shasum":"089b0ef1b52ea9e70fe70ccebdeb7a4a2eec7b51","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.d75a5f74.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BACRA9TVsSAnZWagAAM1IP+wdvwa3oWgKXpabMT+YA\nEHLH2XsmOcA9CJWrAbX/X6r0DsTzpNrOqslTejq7MPF7DvKyDnzKuROpqyai\nSfz2c+mYkWaLZg9pBp4/WkRYZI9nkrUvoiMJUDz5/1ditmBB0YF7vBPb8WXu\nerUBlEa01P246RAqlBBDibYG6AoDB8QfYePnT74t7m4OWL5pSj1zwrVZitMr\n6/TQds5X2nfKhUi6EH4aTg21rx76GZBhNBG4PxdDSNhljaUm8YdWLHI4McFx\nxlvRGOxzWwLxGL269Rp+CxEwntjcvAtHNTTjKTuKPkhmvsxRmztBpiyngYvB\nm2TTedsDkdT6IrZMa7uIGwiz6gO/O/n5a1koXKHvy6TP6ozfYvY2nfucWGrj\n4u5a+Vm5q0R/ORqe00JGX3FqQr1XbQYTsFK+JcMZVihsXBgOQsvrt8qyqGgS\nnb4m2ZRejV0p5ORpsl9pq/OgHR2iKjqhBlDOBX9XewmrsoErIUHIEQkCaccv\nQl6pUlLdgS3Q7rVnqAtteSSNj2T3NKX47lvfky6GXCeOTLGJZk+yGJPUD2EZ\nphkpmBx1xjJkC49LWIi/Uti1H8iEIRxQw7g3wh17zG8N2Rl7BZ74MGVcZHjz\no8z1kZq2XwuUH6ZOzK2hyNMLeVDdZ9cKcEESLOvT8mmHq1Aj4CHVPXS/TFcZ\nJqoP\r\n=8fOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKIIAANltharDzvH3QIyMnyWorwkBN5R9jFLwZl8m9EAiALG5WiYr+6O6qZ+EyVatIhhjmIYZaT1FNDnykOiD2Jnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.d75a5f74.0_1629446208084_0.8845662582898606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","@material/mwc-tab-indicator":"0.23.0-canary.3d79ffe7.0","@material/tab":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.3d79ffe7.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XxImFsLS09k0myLi/mFz2Z5MrQaXfeZgPedUm7MNRuL9cl4ZdH5SQfKIYUEEisFFZ60100voxX+WCHSy0u7+Hw==","shasum":"ea1be178d4748538c4cea843c8fe60ae5439bce6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.3d79ffe7.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SwCRA9TVsSAnZWagAAa/YQAJwgo2jtwsnFuN0K0lJw\n3tUQWBf0hl4ua4bZ3EJoqVqgMgYfYNabH3IFJFY0T/BHkVfoVCK7qvJRoPuU\nhcQK+iKjmU02FJuLVGYjg6HV+S1I5L4mKXHKwpXELrJbk+2/f5XwQz21KkZM\nlv7VaLXovKk0m0YETKnwyDAdYjY06LZ2NWbRfZguc1VvHxLoUPXskA2DSyYM\nSjd55uoQzKEnEXoUGC9FpuqTKoArZrlpB2uRPnmywSqNBr3Djz4OLs3Fn1Yi\nGrdX/3JNol7saQh4M83oocl8gY3OjjnoKB9Bq/ldGNCOcdWliDX3zf0iN/DU\nD+FdWlU7FLYbU2BKLjBoCJ1zWXtRKtEjc4gy7QGcxXFVp6bvqcZ+e33RnHCY\nOSLMshS3wbj5LGO/GHi/NGa4B0NDl7GJ12vZHEGFKlH7dX87pEeN7MrzYAOZ\ne8APoIrYT0/Q2L31U9akTu0q0cgti6eX10HbVbuCGtOYkO8LKMHMGXE5+e4e\nxAL3hKzxQMfM+c/rlNn7ywyjtQ+Jm22xrzVzz1uKtRVF+kqCXXv154YYFXT1\nCrD9p1FQNhZEVirBD2Yin938+YRVqStRiDFP09PIJqBozKoLu0bubReot4VI\nslPwX737fVe9DOxbZ8SdgTcPSYV9uP8Zsj4tauaiS8e4JK7RlqBPySkQ0pIi\neVUk\r\n=aGJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL9mcKNuGjKkUNPDdPDQPRZIIeGmMcC5aHB0d4104YVgIgaUVOlwuKS8RB0+11VAPBVuLcHHFUmCA/RzjnvTv3lWU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.3d79ffe7.0_1629480112328_0.9069356539446989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.02213ebe.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","@material/mwc-tab-indicator":"0.23.0-canary.02213ebe.0","@material/tab":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.02213ebe.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x19BMSo+DBb1kopKSMqaMHR5bstn07yNbaouKDFkqiJrLghvcMvZ1HUWpxeCorQ7VOWcWnmqTJ/Hw8ZS+GHLNw==","shasum":"93b4745ed18ccece0f057e5cbf3aa8657bc6dd3e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.02213ebe.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XOCRA9TVsSAnZWagAAEGAP/1I2vPpaSsg7788JAZIp\n3/y2iPhoTHRWCRDjPH7LTlcJEi0Y4EDbyVPLyhBpa8EEKydc7F9Bq08uBEMy\nTDM0nOXzULN41I99wCBoA3HHW5SCI43igUbrafxzKDWryU+1HErnqZX/yZ2Y\nzB+jD8kyJkHwsUqPhXRrIKz74EHLZrGzofXyQakBu5YzzO/ixa5Nanymd7fK\nNspxEI1NkFb26F0zmD9ox+23aFYulnw1ZMVohRiuYcwyxRa2dEz434w+iXk5\nqk3xlAoLF4pw1O75QAQoSuZ+CrVTzEE07spbgGebZRRKwN1VEL15GOmsd9jQ\nT4TS1s8W7UwSZ6+LKJ6oKMoD16FV7NeZiuGKP2vjRtXEN/mO5lpkF2EJ6u7h\n6PVCHBAJQ7UZY9fiIKno69DACtNVketZ20EGl1B/qjYavSvsZ1nSdKOgh3mr\nBKKJZLte2bzHP7WPLiQi/x23RK+zyZL5JkYpKDHxiJU/0MBIJsKSWzfWTr4L\nKlbj98IjBCi1VP0+kNnW4v8HKqWOH45zt8H5YDFn/DQgm3hGQXtRH6R547+g\nLUW7x7+d4LaR2Cn5wIH89qca6InbTRpsWbr0J+GjLdNI2QiA5aImG7h/ooLP\nTtneDRpJwZ9FzZD+uZBw4h76GPXqTCWNihl6ayye+9paNfgD+2budBDWwbw2\nfSJ3\r\n=/wnX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkwOP2Ab1LbHOKMH8UVPZoo+dQtjOCz8a2mZVt3McuWgIgA5ohQdHNgORxSH2bfG6sor5FTQmcwNYFmi+V5edbIjo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.02213ebe.0_1629480397852_0.25690451432148786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.90a999b9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","@material/mwc-tab-indicator":"0.23.0-canary.90a999b9.0","@material/tab":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.90a999b9.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WHT9zBr/HpW6PM1COg+cvAKgpZFpCZQG0bk2LRS2bccddXFAioCDE2JLiwmJjDOl2enUh28We2aDySlp+vyDUA==","shasum":"03f1fba8c815ff027e91e6b9501ea5e8c7f1746c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.90a999b9.0.tgz","fileCount":15,"unpackedSize":65900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/e1CRA9TVsSAnZWagAArMAP/0vPfEq6mlr+DMX0rAVB\nsyYPtqWghW6MIofNyCeN6hFN19zulUJpY+hDT11HEkWqT/bXbl4O0kcJCapu\niI6NAgaBRl8KDZ39hkQ+WZ4IgDS3u8U34EECTmZZGGDblkWuT6T/og76KayT\n8Rfq9pU+W0E+1i/TVyPvqPVwgOG2ofmOm7knO9u0/XLBGc/GTdgLs5eknDJ/\npRt3CXKjTxrK0/G9awqcWJLGKbNpQvz0bKImiyIgP3SOqqZesv/DLM8UhfNz\nPWnlOnd3C2v4yjMXCLezDxzJj4OinXr5UMIu+Q4cjzEBb+WZnI7ksteVzwRV\nRD35cZdSSkcWHxBWRyCCJOZzMnMoFOoqjwdh6A1aRv5JrnaJZzw56zxF4KD7\nV/t5CJoAz29KL9PELDKzb8GXnQsKtYMNjXv7AfWn9TO1o7G5I4M5g0HgwrK1\nZPWZa1AoWKoEV64tUX3/j+lFOc2d0gbGFCRpLkk5UsjaZB94kxGTW/bmsVL/\ntagmQ2sKI6eBlCSPvYauDj5830/U88q/XTHXV8iri7zbzPd9keTrcN1oAq1X\nCdGudo02htpkF07mfID/jvbpmnO8do452xO1ySCbLv7IgAG7O4PiNCc2UtSZ\nhL6Mrpll1VPJ/1n1wUyNKlVsWC1JYvJJeqaJV4zuZYTjQ5LAJZWl3E5eH11n\nnPFa\r\n=mI5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQvCcKuUQv+trVsTGTGo2x9k/lKYef0WOnn2bwIidRPAiEA4+lc8caCOrpG8fo7hVGXCrePhgcGmsKK/yhFz+nSTu8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.90a999b9.0_1629484980913_0.7554575279414921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.6db58716.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","@material/mwc-tab-indicator":"0.23.0-canary.6db58716.0","@material/tab":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.6db58716.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1awaXG+suRt9rIItDZtnVZiJWua/1TlExTpCIJNdjop9MD2S9CCjeeXNlzKsyRVZpv8f1emPXBin+HKJjxfqLw==","shasum":"b3ea47722c1c3d36126d6ee9d621e9305c24b4ca","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.6db58716.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WJCRA9TVsSAnZWagAATMAQAIlWBd4O/185ayeO9FuX\nv4U83bRcDr5VW/YWt6rfwUio5hltusyIfRqwyySykcVG2yGN4iAD3vh6xY2o\ngPH0HJsXsjo3sfONpslz5oJeZF47da3yudhv/8iAzoD5Ag5ZcGDNGsA5fu+H\nhz7LVg1kWbM36Ekhdtr45a3yy/2/v+r3oDzjrF26op8+lC4y/D94P3AsCFsZ\ni3sbw0n7PrnLG4SoMdFpYuPg2rPkH2iGoJdZCEXt9tjA40w2BoOtKUnr2jJ0\nUZcKeQ8v7N9n0y3vLFSAdS1wFHjxNdsMS2Uz1lGbKghVqcpQ7DqxrmmyuaCk\nmvsy8ZB0TDlFqagc9MBxoNYV2eah9n1bUcUFVs7babSbsaz81idJ2sRBCA7u\nJpFlGQztMREeO6aGGOPRasSQ4cpn27m6Awlp+G12lwbC8gJVmT2kXHdQPROv\nOXga2M3Y3+qoeqQKa12WFUthUQwKEPm9UFsp8EWce0bqwwpagZhjql9OePVF\n0AOsDuWeK9jrjjlCjZ8a/l9nPbxOIeGj9Uas30GCjLd8tOJboGu6aRXy44ZG\nLzcogRqXleL1TDsGFLZiCX5g6utE+M6otI1Y/lzFZe2WP8lNb4Mec408qQoh\nfchXcEXQJxaJ0t6QkWXY14FIysgAheQoqp3FCWA8AiuV9dhE4lro4LLparMo\nAY9J\r\n=Id45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA1Vf5kv+h+uIBDc4Mpg+qOjVVwFIWDWXgawp6nxK7jAIgc7E2bCuAvtBU82AK/71ln7dA/pE47ajcenhm1NH/2xA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.6db58716.0_1629709705729_0.644664042553247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","@material/mwc-tab-indicator":"0.23.0-canary.9fb5bc35.0","@material/tab":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.9fb5bc35.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IyxBAwJIH+XRPr613aGtoDW/c/Zw/cC9UF8XpN2su37sSkoYoBpo/OC1FUJdAM3+oYASCvdJDqzfAgUO4CtHUQ==","shasum":"cb3218f8159146ee1582922ca24697ca6e95a765","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.9fb5bc35.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZDCRA9TVsSAnZWagAA4F4P/0TtoufMscJuP0J/mmiJ\ngT+zkj5yLOsZIiqLjrv/FsI46UduhEdDe/A50pHxq12FET5v8SPTTvYUe4ut\n1o8YG+3dZ/ubRSJfWL/65yT4oSVjUOAiN4y75pCCtvEf/Yfp017dxLWg8TN/\nrvmYNdGkoRM7OFyvJo8wUW8TonZL4O+0EoAzvKXDdg6TjIpKBxoPQG40zN3y\nFbKpjBkPwKoE5D4dZrPTy3AosmK+KtAzmuM6ClUIMIODbkosVW172fFao/sL\naapl6uGQk6rbfRMnmPAt6bsicnsc+QbvcA/aE1CX19RzFjdWMl8Ef88NdXbE\nZXET07tXff8iW1u46wzua2PYbe0hVjnGlt6X99kvrHdhA08qTkd9hfkLMfC+\n+klmiHZSN1O2REbDVz1qKJITjpMSQRx8ZNvs88HW/PJnwslfV7s/4EQx2HFU\nFQzposUxFh0F3+3BfBjuhdeiwb/Dw36eeP7Eve+ISNr++gdqGK8izVhGn/D9\nAABq7peAf+5OsmMrMkUgKB3TcAdAxsJAu6UL0Uq5W7n2gDYuqSB+wJiVTKiV\nyL4DK9o3UuOzY039dnCbiuF1WoPZBh9tsSsWQJJ1TtS/f1YNyOlCCsWgpWmj\nVUY5qm+Nk+BGfoqaCBqMKIdzT1/8CNoNH1AXakzQ6BtLPCbochza4cDmDqtX\nqzsP\r\n=GkNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYiwnRVwRoDc12ZXYiFaEDHUfPgyDBB/xrybH+rk1vcAiBtgxHYkurN+UCFGT+zfFhDKITFfIN01I/cOVRT9UOWRA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.9fb5bc35.0_1629759042951_0.6144697668413794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","@material/mwc-tab-indicator":"0.23.0-canary.ddaa5d8e.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.ddaa5d8e.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hQ9bsBVdDFhanHTvKzpr0BfO8ovmTK94iMM0Kd/ptAD0UarSuST/ICFZb7RzyvMOiA2ONQz6+2dDCPMCPPrW9g==","shasum":"6515d7197ea2691d432468e9d3603c66c572943e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9nCRA9TVsSAnZWagAAcRYP/RZ6hNCnTcp4G8Eb8BSY\nWow0ippuvX7RTjnF3S8VwX3e1ntbTBvo26gYwAbUMZfurU2xBID0FqWVjop+\nNwH6fh/vfdD98y1vb4A6Uc1aeQRVnb+PLm+5+oGGJfSrnqrI3ZY9lgLwG1qC\nkWeuuoe77ZHeeSqA/WJ7DmSvgaZcyhAHuoYcdZvV2ulVsm8KNLBYBhAwf60V\n+QxUB7rIv6fRsntAZSK+jNgNJRVVdo6m7l3vKMXIKBpU5H/qpdloHf7frciB\niEWU76OSB5sjhUWXiG2/WPqz+ZF9YSF8MvTfefpUXLUYQ+Bb/eDsiwAt3Z81\nN26pfzHxPD8FeOylau0cavsH77yOGX/vQQeZ3PuTp8xXxGNjZlp4kp/4Tf4r\nqpIMX1sATadGHyfJaoRizHX5PJqvm35LoF3W8ZsWkLgBvfPVwdZDCKAQQexj\nlKl4Excw1wxybgoLFMOv+dEIvBQhlkCrdf7Pzio+sDNfPqKC9vRysiipr1MA\nAlnFAHq4p9y3IerstV8T8/iX8ZT4Y1KSF/CiBRYw/i+Z9jJ9sA1Z3E4LVXzg\nOQi3v9qWFMyBG2+wbhU6MZQQ6dh1D/KmDLQI7qwhYGkL9HTyQDCT5mN8RaYM\ndgl4i5GFf1uWmcVrclgTitPIFCpe7AiJJ6+J1eAeVpfRxtiVi/Lm0B3X7q9j\nJxKh\r\n=u/US\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl9Ug84yYX0xWJ+eYBxQAx3DkoKmFEzB9chmtjO9zHJQIhALIbQgZ7EBE2bUpL2WZRGQG+kUwka8M+WWseV5yJY2Rm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.ddaa5d8e.0_1629831014847_0.5624566835874834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.756208fb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","@material/mwc-tab-indicator":"0.23.0-canary.756208fb.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.756208fb.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wZmS452sxixP643HEzQArxo6OQ1vGW3n9RGCWmSSgLewxIeOwXAIQzkZTYymLmwVP7vGgIOXeSqviEYO+fIA7g==","shasum":"144014d5356627144221f5d2af63742217b4e920","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.756208fb.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8oCRA9TVsSAnZWagAA26sP/26st5LiSp1plw2s0Q3n\nsLViKz9nBVsBsW28Oz71hWbxipPzWD3jfeaUAYFqpe0uGHS/iy73tNNrZxWa\naTMhNCS+A0Lonsxfm3cAgBVEZMLo6v0frlizw3Wx/yizw8IOP9XJQau5ae2F\nRE2jPeurQBwI8sk0/AJSfwmyflomUUNuahHSgy5gsXwVc+RtxUhUp4+iBLtP\n7m1gl671pdUouR5UPi4WSfQ2UeWnlIsbmlhF0XBZnilTJ6XUozCgdViA2UaR\ncPKEFpWq9Hf+mrjwwAWXh2INQDVtKdzWntxSFoXSsdBlGxcdNnnA4Wia/oOd\nxYCOCVzJrCQM4sMrVr+0TMqkg6cIrGnyQRYEBHak7YwyxrZhczggNwgNhj0W\nEXSJtSeaMCqrZYWTRNzDOqqnffcEq3j5jhZyQsK1yLaqXMvFskSZFyJlSANb\nEgdzMdWryBGxTZqcarr2jbqDzTd/849lEw3dLKHcLGp+uvCxguDJJVHw1Zqe\nPZQ6hmE2CuKonn3Pf8gOmkqmiEycYX4xqgEuanp9XBStWnARpoqBBd5/qrTT\nM6Rhew1IBScfjbTNqSnqw4Zd/T4wR/gJbJBARCrhi9ZVeQINfD3ugPtU2RuW\n4lwMm9ztjf+VL9hBTq+W2wswIoovUEV3W/4cUazSkR04CT8UkbrzSgWx71D4\n9tzL\r\n=LVFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHy7pPFwAuTHeqiTcEOyHMSefNQIzaZyyuwVtMU6cLsKAiEAiiPPrx2TC8cEWJr3ytagh71J/MCLhH/3p7J1iDtVB80="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.756208fb.0_1629921064374_0.2888666624724745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.9576dcd9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","@material/mwc-tab-indicator":"0.23.0-canary.9576dcd9.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.9576dcd9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tt2pgIsHGMkHrqbvhQ74ZNM71x9T1uIcoxwyjHGxxaljjyXHiT0QvL3dUmEWrZTTwy7xCsGNgJc/5oVdbMcIYQ==","shasum":"4956c8d0ee4601c4f23f8d6655c049cf98266720","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.9576dcd9.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrm1CRA9TVsSAnZWagAAdcMP/j5yyzn2C2e4cTwQqu/t\nbqtw8WYPi95b+IANHoedW8uE7S/aabvr+t0XARx0geu3lrLXqF9SPEGQ2PT5\nlxkxgiTNGnCbO26S5sJUad8CZskORE86vEzkXM/Ykr/Hpw5ZOaosCGNMxh01\nn2lvRPXckZi8QXlgBaGvocEOFcHDYlKYZwUwzd0+7xf4bS3/WW3KFcypjqJk\n34U365H3PTPEZPP/ATNazjZJoFuGRqgyGdkWBXifstIT47NYcq7jkkAO1Url\nshkylJ1WvAHzxqyFh4663J0+kFnoUmPbNo4kyk9CGsxCAdelNHVoQB7rEj/X\nfocFEHW5qi3DwDN1V3qQAANG3f74XuBjdBPIxEcJnC8WYA7gT31afz3yx4as\nsggJu/LFeObJ/cquaVPfTtkkPzsTXrC8jLCmYHLHwRsfsocnuQw/ga1vM7Ot\nxdf1e2eWO9mMEBr44rBi7tJ0eRa4+VcjnNCAX3a5kDPvSJKjYSzQDRNPWnAR\nUJBYL2l1qibSwCxEYrS9LMhC3YOh1i6loPQX09ZAqewpP5XJ21bLlHCEdomQ\nM3dUCH+M1WlPlGP3siLCxMTFx1qJJYVQUQ6hAuUzUCDZa+c63cvjQJOgLVn1\nGfUfwuC73lz343mBoJAx81pew0QhEUue8Ejc+In65aemQKVdNvL/2IvBmS3n\ndlxF\r\n=FE/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwEm25t7kaAFlgkWlWsrSh+3N/93UG4DJ4I3NGtDeIyAiEAp8k6R93FlW4fjy+I9KWX7Eqg6IIu2ef1C8oE5QTVeUI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.9576dcd9.0_1629927861561_0.43540568839741733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.7531cf97.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","@material/mwc-tab-indicator":"0.23.0-canary.7531cf97.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.7531cf97.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OF1suNd82qX0fW77noNEOmWw6KSA6vWOGn+6wEBXbhERDN1AEeJ0dAZyxgwaqStViqN8GMPjOcQ444P+02C33A==","shasum":"9d52a013551547337f9d122b8722e47dc228f149","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.7531cf97.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87MCRA9TVsSAnZWagAAzesP/31Zr7dfFVVKu4Q1bU1u\naGbKl1Qx1hNgrbNjyu2xRDAEEZexh+ZM6h5u5owv8tCNgQqaIbKNzKtkhY2i\nmdBmSZkRazUaTNctw8mGgmN9DmagELzmkrVeRikWsVRmHkqEzfktK+PT3eP5\nSEdtATp2200dbzQry86sGF6KEhIlDJ4qLxVZtuMCRz66ul2x3+oB8cpjrbAx\nSzVRkO4KfWgvLMK38e+tL+sACIDvOmZj2U80JKnvlGHREJ4lSPNsaGexqt9z\nlqBcx2hWyt/iRtX5GpFRsQHbfCTbvIv6VvXFxk/hJ2lsXGujWf6/1CulPovo\nCw0AfZxjE9Ei+KrDnd47UHq1G7Lq2H6hB8WBMUOQon/ngmqDXtb7VLnV8pys\nA3g+iRx6y5jUtwC4Eq4ct08kXIasPqhbp+DNYB+Yo8wcuQ4cx3Jjva7SXnFL\n4XbrNeScjNmDF0Zeam1Q+MofuxVVii/ZMuFUenMwnsGxxiz3iCKNfpb0sz+i\n+YhA3zr1u9OM0FjYaBL3VlxJlhvZhjJYua0neLPDWs1DYQRx+LHUGi5MsMiG\nff+AmEb14qpEdeSCmWRDulomlFvDH8lFUhlkTlBNfJKspLyzDnoXOr/a030e\nSQDiqwGirzSVnhynzbD6mC6VjRxUpe8jc+lXwQiqzajccQp7Mabhq4wuZGIH\nxHdE\r\n=guiZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg+1miPsCw2Jt3EeZTTLU7fmK7asAlh57PC/gSyFCO4AIhAITjFfWJK2WEbr0r4Sb80EvsGYeSb5/1wt/HOnS8Ia+c"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.7531cf97.0_1629998796514_0.8831453948697281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.3bab26b4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","@material/mwc-tab-indicator":"0.23.0-canary.3bab26b4.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.3bab26b4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qe0oQM9PYlRPnEnutrj3feow/zLXC8FojQdz6b2kPstUGUHyFbE4oDfPt/uqj8UYVeEUaUply5FBTMigKDIKgw==","shasum":"314a4dbd15ff5085934207871fc24a5231a940e6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.3bab26b4.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtrCRA9TVsSAnZWagAAT0kP/09RmTm7aRbsRqlB38TI\nlPE27UdtwdGnxskBWCyXfsY3CD3j/rc16ITDg+2Sj7xv212NYorYrGiD0Soq\nKisX8qkkzhdOms2EZyBgcNoDyBgPM+2sOOqTD2WmC22EnNcSMoUStY/IaZjr\nA70+OKX3cCajDchSvKdRZgbDuojnjGgcIbjjPvXrqNI1Qwj3DEO9LIj2XtaY\nL2wMY1kM7zXCA8IumYcKyoOD+C6Uo5Fkr9BniYgWXPL2Syy4unYn9uUjBA1L\nEw5G/tOUS33bwsYDOLG+/Qynz6MSr9Rx09q0i3tPbA64FHSt6lg6BU6Kamup\nWvwhtlRwR6VbcBLpLXqzlZ05o5k5EDpUBi9eWrG5xBputIUr7Ooc798VfWP7\ncIr5UwR8Q4otfCoGu6ll54dR7ZDv/odWsjyKy8s9Insb24GQ+jDtzP8Z5a52\nbjc8sqCybREUsA3frSfZunNVM7TAGqoAPbqfud9rnnU3ZbBlbvj1vAO/SZAW\nrvnhFCHX+TRx2+9WDcWaOtxCnqME5gyRzF6h2BUtYgjwtoejPtdhTvYRHC7X\ns1dosC4DAvzX4WxuM4gpnLT0NxBkIT12urI1yYxq7DnOWgri9fuWJFQkpJ95\nBytWizB701MQnnjo8KzDMvqQ4hvdB9X+Rhxg33oXvnprADJhV1tyO7YwidqS\nf/5D\r\n=douk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF6a8LdotWAHBEOXanpxmArxbkU597g6zMdO2xF8co6gIgMu69dmepsq+Vvr13Hdh/evMpTF90219AZADUaKF64eI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.3bab26b4.0_1630014315238_0.9294112710899674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.fab48bee.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","@material/mwc-tab-indicator":"0.23.0-canary.fab48bee.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.fab48bee.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AHWl4RdDPmJ2aj/P5BoXdxTBpWd0jtay4eBrDj8bluwp8aTAxyG8PDIm2BpLZbCE6ACFZM8RpCZ5zh3QHUGZHQ==","shasum":"00a26c8986f1e3961ea1a28576df8e135c89ddb2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.fab48bee.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDFCRA9TVsSAnZWagAA8d4P/iPl2BG6N7rXCJ6LJamo\nnsaHcWb1bUrLW0eBSyMTkApOhJSxjYo4PvjgfDhkKRI39UCpKFAIDHkZbIBt\nlOgeAegT8YG0W3jQCK3SfdPhjuCzjIppmNsfcG6+Cfll8XUz/MhrJdlDpFsi\na88bisC3TAtE5onUuFReijWbNkv/yrO97Dt0ErJqBi63N47UIH3ms0p5wEeI\nVKrFN1uHhCyGTi7Gt18NonHrKDlELiuF0MZU7aE8WU2asTVMBKSXz/a7Zwf+\nDg0XVTIK7E+OyPZfSVe6G+7abPCk3T3Rr0jUTe7m19bvvgP3K9BDFqk+W3GP\nfCaXAesXI+j7aTJypTUP5MIoCfYCcibR/MGsGbYSBvxNPK9WZPEYUcgYMVO+\nHMXNH/q9vmNRhe4kXFEgr6/R6AUKOzxH/DAZSkEY31d5n2ZNrJLcQc+znyaV\nwFrIpvdY84cpizl6d1zWkO2+3RhEf+I4X0CUjEiYNAfvFowqMqEOkNDtefbN\nl1au1zmbU4ChEFUhCzMnnSjgmWIMYH/7GzzLrK8gU2CqYTWGim2EZZ9OrKWY\n0cDyjhJd7wpevekfWZ+U1RMP38vst2/nd6axJOagHXtdOU5xG5OfSMIaHn7f\nVcZMgYVTgkIs/g+cwWwcBZjrMX6rKNRRdNxe7j17TlEuGLxhn/dUhD3k/qYd\nWl6T\r\n=0Fm+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkIDomMeOrQZHoyL3E9B6cmPHBsokaqwS0/TI+EfPm2AiEAn426Yl86O/xg3mf81e3rGyTY4E2TzxHWpfmawXM66I4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.fab48bee.0_1630015685806_0.7338550353342959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.dec18df7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","@material/mwc-tab-indicator":"0.23.0-canary.dec18df7.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.dec18df7.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n66BGuJ/VonruXoR6kEBHFPdQwfQ1/HvmvKpRCDPoGOCY3TKjQgA0T98pg8rZvh+Q9agUVJm+zSnYBiu8ugHRg==","shasum":"64d279a1286ad8c9e7178ce7c52f4ce6c0b8e322","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.dec18df7.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbiCRA9TVsSAnZWagAAdzwQAJiGhkmkEAN8hSF/rjLU\nQDbie7YLvyRvNCxbLdMyrB4Tw7o7eX5pWQgMxrceLmmNLjfF11Ay7gvkos0N\nOMZ/gnfjXBvC+C30fVswzvG0P814Xx30w8nY/ooeG8c4mk54rvM30EBmcw/7\n0YJSPePJjVS0IRFPAl987F3c2Ich14OZmw56lCESrJ8zW8UJUQHDSyJvDJmD\nUkMtK0qYxIczjYFZlnjXJVU9LHNsUgp0FbjC6+5aDsXoqR0o3iRb28wiNeER\nqAw5Z3SfMragjhfTeyCYSxjJjsIgm6Gf7aZMnplhJINojiKQ+3x681ycsBXN\noWWVXET0NLrhwf8lOCgwI2POvOf0JUQ8WeJrKLy7+x+RPyJg7AOIpLvaRvkP\n16WutVmwOdDlcQzP9/4u8CF6zblZ9RJFwXRQLRP04ccon3tMAGc0HYt4mr02\nGPSb1N8sOe2+Cjb+C2eDwu6lv4XykyPHgwuRzbfEeLP38o91vADKMg9s29qy\n5v0Dy54wLQinnHrp0MEQRW8ez+tGfz5Z3ONsqVmUD8mfgi3K3+6vCxBYSJOi\naA60WOjq+aysTM1UdsO4XHf7kdMHdwbbM/Q1qP46AI1j3yUy8xrswBhELNRJ\n66FCLOHA07RbzVul/KUi3EFfGlx5j2vslu5hd80h2+7VncWPKwSTRXuYeQ3y\nhiS8\r\n=Sx26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6t2gedFCcqPgWMKhVeAh1DIADO8BHE4sbrTJYeEqdowIhAK2WsbLRk6OFCZeQbpRg9KOkcLzKQ9Yi8jFmVxTiTvS8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.dec18df7.0_1630312162732_0.2929417803469432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.61fe5b17.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","@material/mwc-tab-indicator":"0.23.0-canary.61fe5b17.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.61fe5b17.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aToubk6eYXfc5Kf4kazLrbhW4o0wWZOGO1xxwL0cwfT/p5DJ1RsiltaSqhxFCdciXWI/eGzriAu78TcRl0+E1A==","shasum":"fa3ce0b7d1e3774bb7c339fc5e37cd836b4a959e","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.61fe5b17.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGDCRA9TVsSAnZWagAAcwQP/16snS0PsANuxAZ97ftF\nVXZ4+qhSnEw+BtdoEqWKM1P1q6kD3KzQaP3HHfNR+xMbkcMy7HfgCrdA/JRU\nU1abPmLUAOMmvSzjr+CB+k1j1dpT4AbkJ1GdyCg8kBuiWDlchYn3UjQIttQM\nS6pEjTR2RD0QQLHU9KOft6fweDbNG//QVnnJ7WAe4pngcEDJ1C/2todgQoWZ\nXRbOb7npmLhKgT/KvAtwDeVXClu3T41wMzFztOIf7qgur3SFSrGn3z5Jw2Zk\n4w1ce2Z5sgjsHsfKJ0ewMVsXyWakNrPqeZG82m2bLoGajzV5A666682900Gf\ncEJpl1l3L3RBD37MTKahA5p3WF1A+05B2j0lL1C2hs6nWNlCUdKhozrch1Og\n96Ugq2g+E2O8QMekkTh+Gd0BAUz5MZXa3IZkcAW7rxV3sDdVp1ioeNp2awtI\nyWtCEmP9INC/RrUGUGIPt5riIIZYQ/CQh5YdFgqU46+sLF7hBqXp3QO6MwjS\nJNYXgiBuz/43Bha0Ti3xKuZaV3AHQBdPHQEKKiSY+vgwc+p9/bcYQgzPW893\noabZV5JtxuQF575D6o/bLq7+sgHKxjwqPVs+SCNQwnROn3/qfq13b1ZoYCUb\nvrmai9O2wk8AzSPnOAmE6gMCeqhX+0wUAquw/dMDwubscKilxvIJwsk9dzEn\nRwoz\r\n=G7IT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBPfgBHONk+m5jPqEZCRuY88K3j/QtY9kmLZtFHhjTbwIgQ6YjkGxJzSfpnhEom9h2f/TrmE/CH0kSO92IeO07ZBs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.61fe5b17.0_1630351747746_0.9759162728997584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.a8c31f54.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","@material/mwc-tab-indicator":"0.23.0-canary.a8c31f54.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.a8c31f54.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6NdQdtPJIee8TUcimbbDMDas7V5AbgXu2WQxVJixIOtEij1HkAByOdBpyIBJvOTKqotADtMgl5hgdjYE7tBUrw==","shasum":"ed328f1de63d5c96009402a759e6589935c48718","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.a8c31f54.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUA8CRA9TVsSAnZWagAAqsgQAICn7SO1W158cagWI/Bk\nbFqbwmLyQ1h+TWRRlt+rLcNmSWurOMTmbmojOvhfUyxsMoyyYzEJcp+7uAPX\nip7kxvkpWzQUiDvnwTqRVezwu8UN0YL4ZxgAXcQCyXMGr52lYnhdopsRMD/w\nqRjCIUeaPDGRbTbThbG+YJTbnDBx7qP46fGBMlAlytNXZsaMq7nnn+EgeF/Q\nBy4VIBpiXfMCEtP2achGrnJDphBXRuDHZRSc9COa6o3JG8aJ9cJmxB/2pvWK\nwgTF2pEgaG61rs8q4LvtpCX6i0VqAHdowvyNb7K71tT4i29u1cHJig8tCeuD\nQ0N+SU/aOwI0Z6vZhw8hY2xy+baNsuXad/RME1YHMDODreg7jXU/XYe2pb3T\nPzhxRuaj29DCp5CMNjywkJ7Zy2l7X2KRa2hNpbO0BMMfRIOLsFjy2iVx1Wl/\nYKuC+rDjI1RT5u7fR7djf/1AL7JtLNSxml9sf1fLlVfFsFSCf42zKSMcBKEg\neTUX2+EGFiuciPGJBHs5mKqYKN7PI7k6lDMNbS0Yfhz6wN3HA5WIq2/Njn1h\nCFQFCeI/O/fPyK5NTYpWqLvwxVT7jMw2SthltfqJZ4/61VftoQ+QcLKs/tMy\nrDAlmL2r/st79yoHVYHasTVC4NOaJ6/v1oElBrcBUpYDghqDUNT2F2cNsKfV\nyOd2\r\n=SrFS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjuErz+7JCQGhfoadjN/Op//gxIX4pBuibLb6aKP2pAAiBeIe4VCaBlQVM4F4+ud/aAP/BKiyEsq/H4AAkt9cnAwA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.a8c31f54.0_1630355516140_0.21401597847117593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.a096dba8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","@material/mwc-tab-indicator":"0.23.0-canary.a096dba8.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.a096dba8.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j6OqPZw+1Ad+iZX9MKfUAoxSEDK/I2uEVuuNO78IOBfcbf+4tPVCX3ub1G8F5teCNkIne3k+kt4r+RNJG/WfSg==","shasum":"1c4b26b1edf194be6577f634dc60db67e758f44c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.a096dba8.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrqCRA9TVsSAnZWagAAuG4QAI7YfAlVzic0yOtIE7K+\nP6ffrnrbYynhsyEu5CcUVSMAsOGqZvz6sFUAv4w350fRlEYghhl0BfXQlQGf\nPc3G+Uq65LNwH83opOjmIoVbKtgc3B1nqa+rTpOMxVKEG4Sbv3z1yY9fY5XQ\nkKTX1Z0mj8tK/QJlAvXZFznb73KXhPNGRxfF+X9tZlVhNPbooy7HF4gM4AZh\njV6w1JpUmH2whmggFwmf02xwKa/19hdms5TSZ12/Q+fAM3Yyjf2cXuQbqNa2\ncDepFjlrH130rlYlgAeVml6ly68J1Qjpafi9zFFJEVTlzXDoybCuxZ4QTYTi\nqljdj7k95E3QLTd2kE3vGg88HlCjU4IoKi4c3FIqqTmEaMPJPaA8oufGWKF3\nZqCVMwP/Vh+gnzocd+meqq1Lak37uovS83Qq1EyQBdsWaoY3PwyzQVM4CIia\nX8AFaid3ICpETiNOzNHOB5HUmZdYpzcNjWbQ+zfywpZrVVCw2uHN/rDQkSib\nSW024s3G6W1KL/JCPx+Ul614ma8bxRschLYsjEE7N9zdw4UfLWR7TM+uvYUt\nJwjO9NmJk74rm09wczl14TOCmvAGzYDlXq+5umoBnCa261iZkpYhe+z0ER9V\nEMJUNBrR/p0BszAjgxFNQyrDldNSPL8IqkKpPqS3CBphFul3qqRawXrh629I\nBEyb\r\n=EuTc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp+be1oUlSno44vJjgzWyChKtWM0+cIhXiE3GRVlmsPgIgCo9j9jV1brMqodUCICuMfNQHa9KW8cIJbsh0Kuf1E0g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.a096dba8.0_1630448362815_0.16012465029668066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.7ec04d47.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","@material/mwc-tab-indicator":"0.23.0-canary.7ec04d47.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.7ec04d47.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z+WMMXhCp/uPhy0osf2kqMYREMERqlAyXKquBRmPnni1xqSGKemL83+250xQtctET6qHwk1QOZ18/bgeMYCU6Q==","shasum":"68598afb4e3faf16f6a9ca89c0056abc29da4c0a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.7ec04d47.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1/CRA9TVsSAnZWagAAQMIP+gK3Mvlth/EniWP9Hhn3\npvHD9PiUVtKhgGTObqszR1L4VPSz3UjqZUfnm30RzXgpHinsew8AwUKqYCZa\nI8GLK2iABBlY0m/d3/PNdBbsLBZLHCMwGhxfhuM33BP2rC/OJgEjpmXf3LjP\nuP+aGtF2oVF4IJujzQr8vX1J+/ZoptXApT8F50V1tlSS/ScyVMygsASBZkSA\nj1q8Nvc06a0b2asUJpPuWcaHFvzYN+EIuh/ks2Q1oTZaCxfoQzeaSuAo+26s\nnSgF143gDtTICpSWu/QJjk8gG2A2F/2sBtuQimpJyTNbiTVe4T28uqWPfAOO\nwZZacBifg2+EsM57kwncZkqgACwvJr3A2SYU2UuzMK1oEEHlW4d9IQhfJVgb\np7rCW6oMGMg7J/lrOSxF/VWLs8uIczAdOYqkPyOrFLU2ek9ifbBtlp2soNoY\nya51BS6VU6Jvg3xDqqNWSTXBmwqRpuvRGhBtoYOE/ntR3jalXXUCZYHB2SEu\nbhGx29T9ABnkoBhp6Ke9WtEZh6kdzc4UBZcYANxcQlP/Om3k3sc2S6lJzQGn\nbQwGLIYmbPECGiJzXlVV2Jybn1ykYhhV+UwWEuoIBbKkIi9USnNcLHMDjdab\nyjrtEoOMNjAomC5uTXDKw5bDHbPFeif9jBJa/EI0A4UoEE1AvD6fk6CCcyKY\nViCy\r\n=vboR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB95vFdgipTKDaKtYNDpSbjw2+zIbB2cTgPFO+kWhvS2AiEAjIUKrWsqcv7rz8Gl4O62ilGxI6lZfjDPSw30XbxHeE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.7ec04d47.0_1630625151099_0.8944482240919234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.d00b098d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","@material/mwc-tab-indicator":"0.23.0-canary.d00b098d.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.d00b098d.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-svdGfCL8eFca42pCcTf9tGflZRG/+W53+HfyLwcnARP5iwf/ltWQHYAoUDIzAcQKQvts80AApFzZqIouUrfATQ==","shasum":"90799f262408a5d296d45d0d611f87d490f76964","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.d00b098d.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMpCRA9TVsSAnZWagAAIboP/28Nb6ZK8Wv2DHaNonzM\nCFtUQcXNQGxkkbbRaDfET7y8WV+i+u0bqRKoSN+IJU6OXBTtkiDHA72W1K1J\nsBGLkj7qkEiaZcEAYXX2SDZz84tiH8D023pNjl7FlUjgCfk0O/MsOdUIgzmO\nF9lENw0PP2zsQ9bTEftm8WEkMMcH4HTyaw0M0ZvLCITW0gZgaHclwcUjMAuw\nlM9Ol/VF/oOc6GGRZcdIfujIt60BUP/9Y3B54TGKsuHTNYaohlTg0g7p0hZi\noohLc8I006/l9+F6UFpLFSkvmsT83DiFFVmpbIfNjrlYBHgeWKwFMyGmygIL\nyo5n2znHoS3rRMgPgPzQiyeNJN65doMcCZRbZwjgJHOho1mFnZHnbojRnvyI\neXHE5wKNcUybj7UcbLYlyPe79NuokNTt2VqVTKoExZLhr6NWYdP8wd2KSh/y\nlGVvxBNt0is/yaaISga326AbnRxNhYxO6zG7GUFqmPEoWHvtCceTHdefF2n+\nMGPJfy11JipWKqBP9zxwvie2xmkT0TaD8vHdywo4NTr5Jd4/LvbmJr7efMum\nmORewhU1xtAONKxuaxAXUWeV0QEgYc9ls9R2EJAzsbhz0uchYllSzdJbY5+A\nGhJ85gok12SlSt/Os83Zwpf+HzLnxqBFtYbPuV5G8ooGYGhwo4SZG4OZm09H\nLcML\r\n=IqkS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDp9tibh4i60ZL3HHryAufeSUS4xTQlMcQep/vfNByjAiB2Gf1991MZvWPeSVrXz3kD+cN+xUsQlxbWAfiB5EyyQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.d00b098d.0_1630704425183_0.46228741000680307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.f29b3352.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","@material/mwc-tab-indicator":"0.23.0-canary.f29b3352.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.f29b3352.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IDRnO7I4al4vEnBThYeJa+Sk6Bk9v3M4ZZlHQSd+TXRf05lJOXcz7tM4r2FoFr4NbnX8xxaPOMNXtTMdQhhE9g==","shasum":"97f37f724a391a9ccae10332c2af6de10da5d244","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.f29b3352.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yBCRA9TVsSAnZWagAA66MP/0HQSSrzxSpHR+af9HNR\nXnILKaVWTfCfu1BCERlOZ3s4ke3Fd6HmrWlvxGWhEn2bR5GpeQa6h3qgEOdI\njpvkxSRMJRqhtWStn4dHxCWc9qz/02pnqkRZeKdVY9C9NQ8rcw3pULEanpD1\nCZn0ecvNkMnCYdwwV88aTcSuc+eHwbIkbSmyCdNlh5Ci6OM3ROT97aQ+PEW3\nYO3t0pEvNf8+v+PS1eUnbHl83F5+S8cSiTAiuvorQfZ1/6sABpLOxs1ev0zy\ncKkS8fa0RrpM73hAHOxdwY/3J6pquTEfbi6qK91P/5hcNMBfMtCsnawazE/L\ng3z1okgFNR6IKcDZ1UskoxwEWYe1q/Q+6Yn6BUEFOcyBO/53A1T7+qVr4fOd\nmTABBBo0y1MxuYuPSgDLp4pBPzskrCj6nYyhPU3H4vjzYtAKHiFSuXSmPYSR\n+7qmjay9NsUFR2Mp47GmsnunpNc4geKfBHiLl3kRy1hsTUV+cQUX+k11pJIT\nOcj/X8HO99TxIdP5cTKgjaaXDXZkx/OrqggDYL6B4VPyXXgfSz3DI0dHev+2\nFEFI1m2CQOfpF6khxb6N6ghqUmv4szUr2H5YkPmx+ngwI3BBr/3IsOxVrdsS\nvZZNmY1rqHYa8AEgrxBYMgF+Mpjes2rMAlwI45bc7VE1jgeW6HKkE9UBY8Jp\nBiCE\r\n=wGMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjQKbN0d6EE2WgI+v0Bf57hY/l9QKFxmy4VJWhbnqqQQIgPiFWMdPV6W1LEkTao2o5NAgMxMPFg6N9VaSl60H24O4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.f29b3352.0_1631038593791_0.5341318057320144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.4962a163.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","@material/mwc-tab-indicator":"0.23.0-canary.4962a163.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.4962a163.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eY8v3pwxYnhWZKRqZoAhztR81oyklbJVtMLebRN5jqIjh3TiXUlqtCAOHVONcIQNmc0UA5KWUjV4J8LPL0H3ag==","shasum":"b4447e4355a280b0d10c0e587c6638b6dec7ce25","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.4962a163.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uLCRA9TVsSAnZWagAAh+MQAIecEzTw8UlqhuqmBUdt\nNSSzU7AJhPOk2NSYtpySYv5G43M9U3KBleN57nlk/M8O/6vUdA2W1+M6/siH\n6X70wu+Xj8lDqHIzbDTmQH7Z/RbCwbIcuHZj03CuMCeJmP3RtIIQPchuXe4A\nDL5OeCLDKyvh3rRHkQrIH24D2maYCKW0wd6VgdcIJy4H8yeqyJxWxZe7w3yb\nIEwvRcqNfj5GFenU1tLo20Rfdt7z5N4+3US3R5zY5XtgVvYYLSkTH22v6/CZ\nq9Tmy16vH1G0P/097Z16sZ/dKlik3dJB1/YpoFhPw22TJgs/N0788f1PwQxY\nCUQF9eoxIHa0EQI5ESeCSzz9WOQ7xCToQFGd25aOM0QdSwb/ueUjRNa7MrvX\nBQcKlazsYoewvwcgSHa/HQoEna+FRCvt0/ycI/QI4fyVCChCBDGb0hAJgFan\nXlqvsIHc/Pay/QhUPyZMY9ayBwHdU8NPnXumXSYurBGnx2VA/KFtuEAlWnX8\nVAXxsT6Bye8PhLPfw48oKWbIzRXycbgFXtxejqMVb0dkevqAOevfUm49lZw7\n0HOZ2sCYlo9eSzVvX6HV1V3VvA4q33yfEcWBsi677jg29E2yzygONoa9XXlw\nN1Lz+oEb5P2mRDEOcYZGZ7NYuXLHHKRrsHFXEXhBB9vNNFO77BIddzpBOvbb\n0DGv\r\n=3f/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERLPqQam1Fl8KnG71myXbSQxxisaA7MhXtZ519LgV9LAiEArEsjGVbwTR/Np5gYl6NDsEUULEaig4ov3Sf9Nkuqn58="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.4962a163.0_1631058827169_0.46278515831597367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.33102bf4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","@material/mwc-tab-indicator":"0.23.0-canary.33102bf4.0","@material/tab":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.33102bf4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LSBF2BuO6xsqJfI09d2KcP/EKpbUhchH7rxQl6Ywl8kG1tXdqepKzX8DGEAAnHCYufgrREY5o6sSqorysu8WDA==","shasum":"48828a3f33fa1cec17bcf9d8550401d0cf9bb377","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.33102bf4.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABGCRA9TVsSAnZWagAAc9QP/iBpiK9I5H3UvlOajbw9\nvxZ7eOGPaHx00WmvqPPp/3ggYRqeWHB6dUl4/TMh12goknnjRXr4ztOpEVOU\nA1gvcfHPoX1FruVD7GfZLFH6fGejhTuQNa1Hy3PxO5UVQNhV9AJBgwgIf5Cy\nIOF+dDyE868VIKpZI3ACkTVIqij1tTn6Kj3xmrbiHyw7l/wwokgVQ39cyH/X\n5sLtatCWD5r6aeJoYhE8bX1E6MhJjlutszjNMKZXKsnFPcNPqlycTxalXlgs\nZNp7GgiQirTPM3DWKCFuPjW8Qd2RPoYK5nQxxI5Ia1gwG2JJXIbJTcEDPGBC\nQMR8O484IMoZXFLqdTshNWa1TszLrk0peT+dHVSs5vYumllZoMGSixusLr6T\nxrZ8AS4Fti3LSP6uxD+BK50iDt9bjFJTbv5DokpoGnUp0CrGLoe3ldT6d8+d\nlUg7ikQAhKG5P5BpTPFkTyPj4xkMmi70grHsg/wPuP4JqS96dK5sgGwArthL\nWP/+oAA79S62ettmNq3FQsfgAzGSCwFfDvtU4USpBlRlCrZV5C4piTNZYu5g\nWdKRZnDXeAZGRWZxKwpuNP3Pr49udw5/aE7S+qf4NPjFTF1Taa/M4M1x8ygJ\n6kNvKfn+YXhou7azqjYQQ9WAdeC6Iu4EBzzpnskhm9JJNK9RiEd6ef/dloZT\nGK8Y\r\n=ebfh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF48D7U/0W9NbsW7HR857tXI7hNEFqILSpY5nB7VM5O3AiAwsYl0y416Asc773kSTUn2M/TDS1oNmVvcEz5UxrpKWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.33102bf4.0_1631060038374_0.6202527845469197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.76c68381.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","@material/mwc-tab-indicator":"0.23.0-canary.76c68381.0","@material/tab":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.76c68381.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nLNF102POXIm6WP02FLywkS0uDJyCr2YXeCy7X6ipXaMC4a2wJDCQ4xrvFLGyZkmeBGIljr1cMtAmLl4ogaAww==","shasum":"81088162432b48332e4926d6c343b31600b2a8e5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.76c68381.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmQCRA9TVsSAnZWagAA5ngP/3hOuqx1xTjHAXplodYI\njjTEg2Bmof9wSCYbZkBtQyFqGFsrdItK0hJkL2XEhG5W0pL8qTpvnk0x+GSP\n8DlsrYX3aB5GZS0vVPYLkYXLf0yM4CDyQIBNawwqkrpfMtgZM/QuN4lOnpoa\nH6CvvC75PF/ExXz97/TVytv8sppbr4Q+W+H7ym4YJUrrklxxRUC3GkLYY7kX\nw6euxPZsBJaHJqn/rciCec8bAqnXECiXbZdfDckeHxzagXfPP8RybXLzhwBj\nmTz84bV/SjllPYrQjV/7dBLRebMjWuvdveKfyAUziKiMKwN87ItKBnyBRDbR\nGAVeaPigRojVafIKqL/sjlYm1Md+VTaXmNaG/GsO9ngqODkW3HOMZbZeGku3\nutbS0PilJc7jN1GIuB3yxzGZD1UY6Cb9EKN023l2a957uvByPgnN2JvBZftb\ni5N5xcBkGKUDxZBnretb9oCJUsLLUkJhvs15paSrEegEh0zJnF4+ywzC1xkf\nmWhmGWyP7RYmQ2a0NYHco8+77zBpwVShot3mftojUfBi0Z+YQkTpRdl8qXxB\npR5nokoR2lewXQFFXfOdOKCMmQL383f391U9iS75rBJsadnsSwCe35/2B+u+\nY4g/7l0qVlwdQmLSVDQtrTXpSEkmzOWqh96JfVJ0AneSLjclrYa38Uxb7LZM\nbNul\r\n=/ZZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeJi8x4WhL+sknpplOH49rl5IBqdnW2CcD3KYpQWVhLAiB/+HgqmoyuqEai2/i0wUMY3Dt86mqtD+thpJP3QbB0kQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.76c68381.0_1631132048104_0.1802185370695466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.17d51f76.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","@material/mwc-tab-indicator":"0.23.0-canary.17d51f76.0","@material/tab":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.17d51f76.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wHBKzmNVnqa25KFDorTx+4oj70lhIlDQp4qv+4hvqK881zmr9agcdsR5OZs5bLizJOpEshq/q7lnpu1IExbmkg==","shasum":"0a640d6bb137f825369c287dac45e605c10b1dd4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.17d51f76.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUazCRA9TVsSAnZWagAA1EQP+waSTt0JcMOSuVdeuYFE\ncsD3pGCwml4ZXgRt5d36b22Dx3pI+S7Vj0QDCisP3GAS0ZmzMSm9dq6zzLrY\nmbDMqw9DOTsNw/O+Rn3+IVWNmdtw/rF27g1k+3Oz7VTZWajCfHVm/f13JZ6E\nMSWEi4yST3dwnOE8K2/HEaVZf5HqnEhXPyU9haXGtljAkr2qsQ3MzsDO2+hv\n9yv7xoyApgV8l0zkziN+W8gHpVi89HePo8tqCpjzksba4abBR9NOvyQBaoLE\n1oIVKWlV5YVtNuIAZLKRhNyFU4l80tEqTaMKTTN8OXigMZgQ7RYxjJY3ECaU\nbR8GzV8yFq+RRIppaYcXM28BNsY7YBY4m2hahPy8Rx61nHsSjKCagY00H1Ak\nyiv7MECtO+rCiXM6ij3mUT2SAgeF4u1YkihMwzu5c9S+BOL0/BuMmv2OcDZn\nKdJPLM+xUBtO6PGOvqegdQIAeimCTPOLEmih+Cdjt3EKw2u5rMGZ984rq7hd\niZ2IPYAFX991zxaEwKpdFzsXtOiSY0wyJUL+V4rT0JGylz4E9KKvZymU/4Ht\nGJzIaLpwqIWgrE9TaM202Lo2SLjEzD/fyv2ix7bA4lWQU3SKEiuRKjRcPvlx\n9TCNW0CUVC1xX2+OlR7ZGMmLj9yrX8RBpoBVZKzZ078sF8D5dUeB88hKTNC/\nbTNI\r\n=SpgD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtMTli7+xW0eoJbkKHtAxayOzQDUhLsPf/+HjNWsVJ6AIgLBNuVYEdW7CvSsgNa/I+JMJyYP+/OcjNWob796zQ46g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.17d51f76.0_1631143603764_0.25985487863016976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","@material/mwc-tab-indicator":"0.23.0-canary.3fae6c2d.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.3fae6c2d.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oT6vcX0Gk+h9Tzl6sT8EVXLqASLpDiFvVsZf0lQd9QLgYVhL/iqQpq+GIH4O5wdIJKv9jXxK3F5sTLfK23W5KA==","shasum":"111b03c650b3bdb23b4ed86ab215f96029f5044b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.3fae6c2d.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TwCRA9TVsSAnZWagAA6QsP/3iyMZH+xcHsbmvruKb0\nDKUpJeWA8mD0x54esScEQOFCqpv3zXHc5jnt1yl1zib3FuCmkOsDvU5bzL91\nhG2RJorQZTPwRSiyZwcZQS28Fvv/rfxP3hDScKDBgD7onWeh+mK2PqmLcCQE\nKvmtd1h9wefxuHhxl60dFNYzVWbPz+ObitnUrZkPSf6qE4/ZRwmxiGbY/qEM\ncOdxPPm39kH50hmYDjm6qc2jTE/tFn/xKJCSIkKBOzHc0Q01Qk2A6KYjaKUo\nWLMxgKBHYuOICRsgOobr70z4512izdDqyppLCOF7Ud70BRpkKlHpB2T86hJu\nT4mNkNXQr98EOf4EIA/gtuZxE6zRJYQOjZdMLsMN6rQpsrZtMRQvbd6ZogJ8\nDaBNncpEsP6j9f6n6qg9swJOH8zdgjVtPyiKIZhTcaOaI8XDjZhbMn8DjNI+\n6EPAKyjyB7F/3iEQtjIdcy5Xj60YLxZI7CDthpSbx9SCj3dBMgvJuswpY0to\nnH2hOjKHwFYaYsrCDuo6dRqoilH4N4Rf5fuN/iBqnRcjh30iDxv+JGrYm95r\nA5/bc4PAlTprLOdS8B4ZQqtlvySzV07cwFXsRjqHMb0MYgp2m0EkRjNHJ+Xd\n1ZDhNcGdBvgeLaV4QpR6MtTrOevzOzlWVXSd2jvfrFAkIodToQMtqISF0/3e\nRCmn\r\n=1uTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCvLhEMoJ1gOY8BLM9EsLN0ebW2Tu2pVA832Jfc0EDwQIgUMpC5Px45UBYs+/Bu8sUmR2xSazZZqpMfjl0KBZzXls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.3fae6c2d.0_1631298800275_0.5237451366023731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.f1958c4b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","@material/mwc-tab-indicator":"0.23.0-canary.f1958c4b.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.f1958c4b.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RwqQt7KA79s2tf5W4tf72kgh1tnXSPHUhLwKxli8OnVmx1PhqSTbf4X8MZzXPPzHQ87TCNnlozcSEK18Z/dS9g==","shasum":"b77e219bfbf494e9a59f1e6f37130c21506f1cc3","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.f1958c4b.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SgCRA9TVsSAnZWagAAmVsP/2eN/snVn+EhBpILLdBG\n6UnkVCMh8V9B24Hdb04cpd1XWdZ6T3nPfpF5Mu/PXgGA/GSnlx8qvuriQ4Pj\nf14Nppsc4bMZx7lnXGtztgCXTsLbcSJrJRWN3HrJPFSiZwpyoySC199l+Z+D\nA7uCY7W7YNrXls57OxobY2K+1lJvJBg7sSzCc4okGqV/q+l5NGik2KxOW991\ncJt9qVtWhL2YM+IxyrnKDrtMKnFcAIkTaR55QVMUbXaUmsdl7e+HsVLD4Nsh\nQpUItDnFt3RjU7S+dZBZILrcOgAY9bfWvNdvPhVdSlFMeyny5sllQCH3jUNR\n9I59ZCwSn+jVi/KDPokWlM4iIGovr1RAVoch7HnAZyfAnTx0P5OHmYF3wVTz\nah3xrmuPf8PuX9KuL12Z8Z7pU5u+gItnf4I/ktVKLfH4k3tvkce2cG3FuFpb\n2+5HjTUWrw1g6hFT9ledAP9RImqvC7NxczpvwyNAJ7NSo9Tl/JRYKA2ShJPG\nRPv8ECvDktaETPThM0xa5UYtxIcfLYpnLSBo1rmWAGY0EV3ANnTEkjo5QZJu\ncHHWRPepyhrCGIGCWMNYH5uH0jYo4KpTqbb9382PjeZxW9QWoEE79evJwpvT\nOWlvRALmpfQ1mGQOeeJyU9kvGZaFk/HpNLb0d4/DOeV/rGxgGUlhkehRZ1D9\nkdi5\r\n=tmHz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7BTdQSoBTumMsmKpva/H9tJ3MkrQdJbZ1sNCddpZxRgIhAIA498YAbhKJQ1klwHSUbqX4hzTY7MFLcjnO4T5cahuC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.f1958c4b.0_1631560864425_0.8110466033702453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-tab","version":"0.23.0-canary.78abbd59.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","@material/mwc-tab-indicator":"0.23.0-canary.78abbd59.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.23.0-canary.78abbd59.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mmlJlVySQny5fNcpf3Djog/PFT0Nojod8Q+mumZHec4xktXsZxAUEAG+UJvS6joGjqdFUGlOOVjlHLy5NjNdmg==","shasum":"83e03752d7ea2ae68391b54592ea89beea4eba98","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0-canary.78abbd59.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IUCRA9TVsSAnZWagAA4HYP+wREK761WYmnQvBs/KUd\nS75HGk44I4TJxFN/FJcrSwB1gr1COQDZtMjLJSzt6p+bM9oT7n5gkWDDmHij\nj0IGn6LEKHFB0NCva9fQXlWB6BkaAcc4EYRng4I0g0A9/xtE3/Ya8Byz+x9Q\nF/fGxd3Wctwsb07OjVxYrnYjE5M/Js+BYzzgxkEK5M8/HsBYdaPSw8E50NwS\nwUl/NnnRsDrPJkVJii8daNRLImHKzw7EQCf2dfgcTwmIw35RjPPauqobdx3V\nNpg4vk1ggTl5jNc5v/vUhRdje4OmuqtTU4loXnXJ9bqas/BIv97QrzKR1Jaw\ntRZri+lzdaX8SVW3eFTJyEaDbKJSHlBb4PuJX9imY0W+VENmEx5y840wwaHV\nXfQ8NgPaDxaUB7MNnZN8aIPRn3U4azunVo/v2Hfs1dyFYrkNC5CzzaPpvbkf\nNX7dmtGb7bP6FjIwuJAxkBEDTDbs+MOq6Q6mF6BP1o5E7htUoDjsyF8Gsohq\nZtv4E3PWRbf0UN5NNN3gFLo9RFKiORe0hNXKlcU4IxB2O+BjyZ7rh43TRnLj\nJHbndwo+ca8K4J7Eqr3Q4XZ7wfhs6JIH/J83yFtE6UBUSdajzydWvXtX3jVU\ng18QTS+bCuxUlqa7Kiw+Xdrqy0HhAHpARASc12+7H5Oc0AlEYD5rpZ3F1yIu\nNSDy\r\n=nDHB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHVc3fM2grA8v4Fmx/bNYXA0GH6GscplwJHrCXIgMXMAiEA14WlvSXz2lbuMdpKhGFyu7OzJZqjraCOhBE+pRbzvPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.23.0-canary.78abbd59.0_1631568403986_0.685008448611067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-tab","version":"0.23.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-ripple":"^0.23.0","@material/mwc-tab-indicator":"^0.23.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.23.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-u94HpkbWH18r4VKQlkLxqGzDwDDKqkL1NBjQEaLJ1XU4q+kkW7guK/jEL3MkgpfB40I77RPCToAW/CzdIbq1ug==","shasum":"692a47d4daa42deba2c51aead9f4f9663b39996b","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.23.0.tgz","fileCount":18,"unpackedSize":80940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q5CRA9TVsSAnZWagAANl4P/1U1vcgUgPVu7up7iBY2\necnToGcH7l7T7+rxaTSLWegq9arWZ2zYX7zvsQhITcGK9wiYwEAVioqe6Vh5\nMb/5wbCm5qEV3wA+NTshXY7HfjJ4Z5mjip6RWA9leq6BUFtUxAfUf4jUsaFD\nwXXvorkGGTy+uH4hWI7W16Eym3chDe+EuMVX/4ru2Ykq3LiB2cYxRoo8dDpP\n44g+wiaVS+unv3tOdFiWQsMbtUB1DoU5s72yG1MOL/69JM8YYvNakk5c+K0S\nori9FEVzL761v/zcB24MIk6x3q9zc2c5l1tffWPWvpJwVlBmlTjLnm0TUsin\nKcuu5ybuGG8UBH1rR0SKF8NwLJ3cXwPjafCPHVg+hpEjQja90e9Ib4W5V00Y\ncZ0pgjVLOMsGDuobuxNebbl5KibtwL3k+Y0OSs1hahrCMo2sWo+PltMc01kJ\n4QZjsaF2jQfZRs0AfEzYUT6p7DQdIHtJoo0wqofvyZqSQZEzIWyomEhe4NPZ\no2A/epyRzsQDnNLSd8LI3RajVXiKCtNZLg+9VKYzaZxLu8RLBXeM4oONMseN\n72NEl13BRxmWnSjh5I6LU37q3CY8gy/Cv5dBaNuFtSHvixzDn+jpM3JKgbd8\nNF6pO9l5EY4TtREzx+zakH5Hu9ca46mUJPl7vlqYSHN2PfTsbCbCi26Hbojq\nConP\r\n=p09n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHlK56n3JM+cEp+RMAnDclt2sb7yrQ698WUFsfV8g/JgIgKBVTssyZTaEAMTb2Gv+oP+mbH4HRdVJ4CorML1pXGTE="}]},"_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-tab_0.23.0_1631568952966_0.17042440497155376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.9830d665.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","@material/mwc-tab-indicator":"0.24.0-canary.9830d665.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.9830d665.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q1A2N+Vgc/jUBJF/4I3JM9tOh1AnAP3Alb9mySxie34nfVfBwuNN4tu5V8JIY024h5nhJrNnhSsOur54HXrzUA==","shasum":"a43207fce4f5171b83465fad679fc5046ae38a77","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.9830d665.0.tgz","fileCount":15,"unpackedSize":65960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SYCRA9TVsSAnZWagAAlKAQAKHCS05EGIrXnzI3xTup\n3hVtbz+QcJofXnFt1Hw4/cnFxtcDtnrpcIQcu6WJrxc9EAdUTzQKmF9ginrz\nxV0+qhrLRaGoR8JrZm/e6HKvqWh3D/yaAoJgO/On9uXd7owi3w91/JPaDOIy\n+PvkruNpLFCctK4kyGMn45FSFTQVO01lo55jIndPoS0/Vi/Pa4qprXZeZ/q0\n/w8l14pBk3jUNFPYazPeaKjYYe/2udSJ0pJ0Gv7WWxBcq+oLXxFAovgPopTV\ng7jNf9UDSWTNCxJckHxQYIYBbtFQlyax0e2VUicKBDyTPfZvudH77+oaMOT5\nZJzgYDmcT/PVNkInTZkS4Lx284NRoE9O36UzUH0umPqnp7kQhiSU6UOniUZ9\nUZMY/OXWzW29iMnUX6qJLdjhUcV2AFeITMY/ZL7yJMSfFSyQ2Z8yfN2mY0/I\n9PqN50DZSOGd1hxngUW4ld2hXL8QCRBMBev1vlIQT/Xl47h3g/QAS8dtpi+t\ntWvDush+sQlzuyGSAqG3kExcVr+U1iOydqvPAJ4GnSTLo8ciq4GJUvKZzWWy\nEFWDOOHSjRogGUV2RyqMB5MybX2LnZHT44eV5U0mkgwzdEGUVqob2RXGmCMi\n6Qij3K89DlcnFGidRNJ77XgayBMHe3EjzkC8lQeLRdVfxdY/ZdKR6gT9w6e8\nvJM6\r\n=MtLG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA59QKA4crgVLRIu6G5gleU+3OUjTdA4FLoESvpkkcJwIge3dlt9r2Vc9pQ/yiokvgGEbWOjyYLg73W3GStyuShGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.9830d665.0_1631569048565_0.8790865818172613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.20e2081c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","@material/mwc-tab-indicator":"0.24.0-canary.20e2081c.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.20e2081c.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LMvsvbHXQJC7kMbX9oiKiObOLszXbEdwmrSwI+eGJmnJisX96Fam704gfivhYEbyjuM2fCN0HKF/M+i4+vzOMQ==","shasum":"2a446dfee4dd7271d7cda33771f2caa490019ddf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.20e2081c.0.tgz","fileCount":15,"unpackedSize":65968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+SCRA9TVsSAnZWagAAybYQAIA5buArXSmKg2bhweKv\n687g2zOPxWE4y5kiG879VsWWOXOnD9FDhobC1AcLkHWSYdPfFeXvOG5uYytX\nm5J2BG+G2VE6H4kKlsM9BDTyxHuPGpIIEQebiaI0dRHNnyE+Cn4d18FkUCAm\nfKGC4SehDBTX4SYgG0wYQMtEeg/e+YZUi1zSAYA5vWKfMPZbSWSeZvdO9jqd\nPFcG0os5NNQZ5FjZAiXg4FQnpCLk7fOxL+ZUuw1cH/u3sMJ+UUechCjp6oXv\n5sXQQWJfadG4PNaFAuasXsfTLEgrZMCw4XfCZd9mTrx68EQiV1YHgg7cn3t/\nOv8O4zuUDqfpIGMwRSix6usyDnSz8D7E71lSNW1LyKSd5gKqAnx3HXUNG9of\np4H+MJ2WcefwhLdyXxMIdmLGvPm6NmmkcQkV4xSusYAVVnV1uewkYsBBhlg9\nchUKpTJq3p549wmP/OOjVMnMnvVyDJKQFPmymK0slNHjR467FI1PS2UoJaWj\njVS8wwoJeHDc0AbQbOZgEU/+E8WVpHeqYA8f3AWoJLq690SQECNbaZ82Srmi\nHV3AoRGFrOfA+rZon7A8YYgb8h2zG2PDecbs4tHQIFVLYwWcaJKiezpCxXZf\nAiTbZmUQCr+cKVvbWooQcCJ8wmJK1AAdRSFnPwknQzhWuISqS9aLWSed6GSL\nph1v\r\n=e6mb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIJYcIR2zSpMf7v4fFWxpizf6APaL9LC0CoqKOP7z6sAiB+2QYDZsop5IwhfYnc663pnwA24a9OIdJrp01eh4DQug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.20e2081c.0_1631575954113_0.1936977474442847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.583613a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","@material/mwc-tab-indicator":"0.24.0-canary.583613a9.0","@material/tab":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.583613a9.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4D7sVRFSd5YubBfqVww291jc+8LGF9LrYEX+xa97dTbq+JoqV/WzRKffw1nrBoIYPEbXsGVA57c8F9OaBtPhVA==","shasum":"c78fc60c56b437fdbc474c985feb378d22b2fc19","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.583613a9.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQLCRA9TVsSAnZWagAA6TYP/1mJ5fC9Rrvuvi7X+00E\n6GQigxt2D0cr6x1Ei5RuiDHRqOnIL1H9wg4OXN2vhONH+8bHaWPLP6HotZta\nWCW89raNxakvbpcw+gw0SVPBIVxCLqhdZTbeOUbD0CrnCYZDGZ1Vbd2YpY0r\nStnAv6GkRwa5rCeU2Hm3+GQP0qFWF9eASxXCE4ks+eaZBggWdAUExSlHyes2\ntb5fmxjDWlOSqMK8YKidsVN0sWLVOmnJSnraIVPxk2srNOpN+gyTaRtuzL2M\n3jVgzE4E96LwNu72L9y4NoyhkbpubamopbYmtJsUkZkPQxbp82g2hgJRBrrn\nHVXcNLwDun+vRdhQ2WSu0bBNVRnKONyUq9LCJ/BMz/NK45cuKOXmVWiRIVV+\nvvsL4A3YjMYGDk6JFaAyn2g+hTb/zUjDjNKDyxr1mGl7lX0DLuASpg9rMKbw\nLLuc5mAWU7V7B20wP2eDhjgSbpOIA9Vq2uG0077vSt0dnuIbngbdBRX9Of+v\nIUXj9yClZ8se4L4FzKFZ6c5ngDfYqGNmSAXFH60xiXytHI37lzPYUqTh5cJh\njGVS/507kKTesnU0nIeSJAWHGLzq2PWxsXfx1KZF3fLo3r0ckswT04TcFNcM\nDG6+/IeTRvDWQEnwItR47hBVn3cdGG91jcGW/E4vZyXc5O6OqDhvwzl73Sg6\nMQoL\r\n=4Vg+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4AgwSivyCbr9S8Gro+WWe7sFKF9pSg7NHclRSA4pGfAiEAr8KNyn2Cun5to0IB3Ak3dq5D4Q6h78CnWvfPe5AU5mE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.583613a9.0_1631638539698_0.8703642165123542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","@material/mwc-tab-indicator":"0.24.0-canary.0e1bd56f.0","@material/tab":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.0e1bd56f.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-chnP8BK9tK6eOJii7omKgxjIlvAmBJifYaay40OTJ+9ZXkh+wCjiT2YM3rkTo4fDmEr9FepkGIxOg1JjlLhQDA==","shasum":"50c75fb27ac382209e976343226365589e8a9da8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.0e1bd56f.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNy6CRA9TVsSAnZWagAAINYP+QAihZ48gF1WJes3HWmD\nVqWirjFIKsBImU0l3mTIJ4EQUGP6EkpUGE+p8Y/gJpcJ7c3bBdK1ooJLse/S\nYvH4J71lizZd9jDbXfWpTA3691Whpy21IrrtM0qHxzPZ1T8RGoq1q2FVUfm1\nDRgPWtuHHqdlNF2OAwdW6WBexUTx6daCeluUk9/JOLV4UOou9Ui0yZpRN7p7\niq5lZkv+sJCvKkCDmo40OtRIa8sVA77bvSFqPc9ybKSQ85GENKtt5Ty5PZM+\nZ4E2qnxU/M/6FIph2vc9o/1MkL8RTVAwjy2zk47EmNDWcsqwhGZ/cebEd3sH\nRroj1jteskFBFQrj/FgjUD0pzBg+a5Ds1C2i0wPKxY7WZfgogO/t+J9uwkc3\nb/ZjB89fM9PGPGp8l9/UWAtL0q9yJ/HXhxGrRyFh35u2huItdeV8dwGYI7sN\nAox5qp28f8AWp43po6V3HB5bgOy8p5BacnDpXQjTVZuSpNhbt1Q/LPgDk11m\nzj+XsVIaaNTvcWFg370UDgQNqGFZ0bVdWOR7Pi2hPSxKYzMhaspuhuFZDWY2\niwGE76fVt4SgcQ9uYR+g1C7XDU+U+l4e7eWGuIqsiuBJ+VTtTtj6zPvI34Ib\n9WEPuylS7L4pWcsMCkuACjon7tojwXQ29vHzJ6QATR9f9HhStBEQTt5D5t6l\nDZ+y\r\n=tdB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKKMroJWyeGtFq6NbTaLG2sWBosQ+znZIrYh0OVHYJPAiBxWn3a4wFkI/M0DTKCk4saJ2yLlIWR44ZGSDreJ+N0HA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.0e1bd56f.0_1631640762003_0.6790733185120901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.7bb1818e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","@material/mwc-tab-indicator":"0.24.0-canary.7bb1818e.0","@material/tab":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.7bb1818e.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jXmS3Mf1pnpKb61J5fockrN/C8nVwpaHOYZHbn6l/KjfBAY+5GSBSYkR+dpttxK5qRi7sM7+KlqTVoR0T6GiEQ==","shasum":"124aac13b12ef5994bc9f562694c402407ca300f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.7bb1818e.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT//CRA9TVsSAnZWagAA0k0P+wROLiUMoazemknKYTP+\n8HeYKVnIMDXY3HvVE7Nha6a0qKeBBmaB5+P5A89XApw6YbLiv6rdF0GOmJim\nCyQpDOqIVlUuqe6Qmxpp4ufKQAJJp/CF2BCdb9wTXeCZTMSc1f4ioZCweaNF\n5Q4ooTkDnVkEHmj6Vu3sKllI3vebgjzPIZOIF+AUgtmo5nbn6D/Yt6FXguNi\n7GCc9DCTW5f2sf1QVOQ60b0llUlaEvMVwTWQ9buGIa5TVEM6EdK+dfM5xfmN\n9FmhDUpng7OKvhB5hKF7zhUrK/sDp7qZfletwt2d7cM1AeGVxloZtW7eQrI4\nd/MQJN8p0hiIEsncTVAu0rx6yQgbjxy7nLkeL/ro+82pw/DfKUqUMgFT7x2P\njQY9oFcLn3nu0NDzD205bZEmAa5+AmskulCX3SueDICpQLvLLF3NSGke+2Rd\nKVx/foB7TR+R5JVTWAKJ1P59pJYVwfPCDxylSco9+yStIu0f58GMsAKXbZLv\nCOqmXfiUbftQFs5ToSRdeqZear6TyuaC9cVa8Ty+PfiHpkTvw3xlYB6EIja3\nt+a3RBULM6m4XanXxLsjOQJ/Z95f/Eh385SNsQrH+0BXOMoXf6jr1an7hsSd\nry0Q2Tmi8Fn/gR3Cba70EicqCyvkFxVDPMQf94Zl2Aw87MGAHgeXdYa/nuCi\n/NeR\r\n=N/at\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFmU35pOv1UZQO1tbPlmj3DmEb+DSrf9EBVzGGyOahrwIhALZztDnx20m2D9M7PRu9oCf+8P9V/Hdl6lh0dDMdYDrH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.7bb1818e.0_1631666175575_0.05664638642351538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.b5e665a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","@material/mwc-tab-indicator":"0.24.0-canary.b5e665a9.0","@material/tab":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.b5e665a9.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-raBBkkDQzQPrmwDRzecsbxbq9tCXsh50GTa1WOisVgHenuDYUEKJ4rP+dzXUbhmzZ9Q8OIi6Jj/jpliVQ7jXhQ==","shasum":"9f7ee073e6ec0ddcbc7ee4c0469266fa3a1afb82","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.b5e665a9.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfMCRA9TVsSAnZWagAAqOEQAIhRFX+T4y7lKHI//WKW\nFZgEAU331PQy3CaoPaMFQxaaFK8JyErrR3a4UsjRVcny+d+/37r29tiHftfS\ns0beGnPBldzuatXFHHRVPaQVyKzRrZKeqEyXWYPzdtngIkAkIUihOevGXiLk\nAl6Vnr2Gi8ADo57PCZjnvv8rZ45rwG8nRVPONa4rDq2w/hPx3diyPLlbhLMd\ntFoIMUGQHCzQRgCNB420/ckgArM3nlPo9dmQ2cw03S4Q2oeGghvdzZVf2x+g\n7SlbpsmQgQNF/jxHWDI3ebFi1IveC12/qgNz9X8Tp+j/tGjXgwA1yRV7ecrM\nWySGh0UO0R/CM8E6NdmcRH14uuTZk7ITSW7JZSbMAxnM6URzsQ8nbChKoMrY\n3dGI4+DMSbWoxt4H3s6Oo3CbU/wYiBnDkXnAQI3l6PvJl+Y5xFTnnjYFD6dc\nbRSRal3awRutgU3OdznFhmZ3V/PEwPVWqJQIPxv3wudvUr0x241oMsbIXnXJ\n3wt3pjR5xT/5G6Zp5zicq49a9miBUyjzIaGPrIlrRaARclxNjTitrH7pQXOM\nWanssA6ERsCrWhmAqcV4WHaL1etleDFp23TACU42RMcBbI5+iVhINlGMmY3p\nQpnuiq4bvkE7yuR0hNqCdEkDs27ANpGZavtawTQnvhkZVbjDusdpLd8wcGAV\nK9lA\r\n=YNQ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+JRN6bsPUhWb763K/U0uOj9Ltt3auVep71qQYs1ztBQIgNtMem76gPUK2UPDcVhTZkgtxILUt7/TB7Y8O6BZctPo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.b5e665a9.0_1631729612616_0.5296522206335035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.ab1e177c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","@material/mwc-tab-indicator":"0.24.0-canary.ab1e177c.0","@material/tab":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.ab1e177c.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iNd4nGevBwipMoSxoDhNhmgUg6UIpK5DaBp/Jj6wl66/CrO1yJmIBCz/PpTCukB5Sx/Kcwf3ENpi1eMvEqiX1w==","shasum":"6a5d7ed492ae7c1a21da1b10d23f9c328f672f2a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.ab1e177c.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj86CRA9TVsSAnZWagAAqZUP/jAHb52mPuQkQMb7DKAA\nIADDUFWhoT4U3Qmc9lISVgCJ9/TH34LWWosDKdlNELCKbTNp1/8cSzL+ISjS\nKLncGo9B6rxgK5fL1fi14a2wGEjJMuEJIhivyuKYkRYR1ye4Gta5MN20XLf2\ny5NhrSDmFqg78IiF5fNGCu99we2vpRs44YJ0KqZlDx1IkmbzdqrKeLO68UqQ\nb7mK/l/juGF/OQIvBRVc5fZMfwqNRyZOC7Qgv1Us8Zhvp5LWxLM6FcvQEw0/\nv06rmEumGPECogMehPzMds/bScm/x44Ky95EWV/5Wq56n+jgcPufsZUU0pvh\nSi5pWLiiubUbNnyIxR3TM+n6zjLtaeMz/hBz0A03JTFLBh/wHj0n9iL2bf7y\nnQAn22W/kbH0kAJAQMsu3ybKQTVQ4W4oOXAVvnHl21d/tPE6kxCSy57sSKjw\njNpaYcLLSk4VoXPbp/BIBoqyK2LM7IzT+j92eiyW7qwK8R2t1SrovcX2/On6\n06fEGXwbf7f0ERc416T+ke38kQiyHRRtQgTi5JoguTJW1yyqJEBAXcwE9FId\nRVwczL38X2Y4B/5XXia1de8WGQAreVY+npkxV/5dJsoT7xqxPwCqYfRKkq30\nwZz5TUmlIVUFFAkvh5zAotr2vXRDBvE0JyHEd8E/lqYzxidwURMthHakFv/2\ni9lX\r\n=g6rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEVXzFWfVkg8rX8goYjOpFlQGMht8wV2dQ4R9/bAmD8QIhAIuLMK0wI6qQ9wW5rO0TnJljBBh8R/rR6gaW7iDPBpnl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.ab1e177c.0_1631731514017_0.3772829261603048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.8dff8894.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","@material/mwc-tab-indicator":"0.24.0-canary.8dff8894.0","@material/tab":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.8dff8894.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LmWaRmGmOqWyv+n106qYIzg0kX79K4FjyZs4vvW+7oy8ZO64Em0u/TdaTQDwxNL7FdD4xLIfSBcjCqbTEveflw==","shasum":"bf08b315f3be2367e319bef80c17cbdc68157c08","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.8dff8894.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTJCRA9TVsSAnZWagAAfZ0QAIbUxwKN7blvcI92rTqp\n/TrS0m+m1O51+8ycG8FcnZq+zCtYteaPnHsEqhhLYPZd8SmgY/n/hWj70w9C\n6fix9MZfgNiYp/bPOEZu+PigcesJDAMHDO8evbMl88jGm4PqN8loiFGM/ptM\nuUlWiyeB1VEwZMKr8CInmMw6Etm8SZ4RnqtKCZcV8UjknErX1EQSNVl3z2cA\nhL44w0HuqmPbJ/i/tfCFK7mIjGSPVGWQ+zsMQjrdtRtLfVnkKwkdUACK+ujp\nPWnNw8SbTbVFHfTqt6/viV3KL/jsP5eDiBVhJp/FEzU6Ch8xiNUde2XKRMQA\nF+ZimXkELGVYbj2eWbvsHjG7rkKd9MpevE7Pn5IG0HfhHM35XFIghHhIInhm\nvoaWh3RcwEoQVBCjUt1n7sCNV3yomktT0NbQnYRlA78qpurbIyxdzcARrTK2\nq2sPA6IuM/F3jYEfwsn6yX0PnLB9O/pyip7AO7LUDbwobTGgbWaCnqTYBfSS\nFH4X237A6mS26JCKW4AM9Yf/bXLa/lKR2Ql+/+P1t2PY0ZWNEongnioQLEb4\nJcB96w/3qTA2IC8u2E37kEzsgjSTu8y0yGgScVaNsHX9lWxGmz/FVXW/8sHa\nKBhC0cDCkPIdHS7C2i0rs6S9Gjzkz+fajORrI9KYs2v+gfFSXBQqsRl/Os8y\nIEEP\r\n=UdaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCudOzRruqrrL6MGfOtkupPxg4Qv68NFVYeOHNhy7E9AQIhAM6/GzdNnjOkWQyYSlHqs0gYCDt9SgupcsfW0KdsC7jX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.8dff8894.0_1631732937798_0.9275097037512778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.9cd7e927.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","@material/mwc-tab-indicator":"0.24.0-canary.9cd7e927.0","@material/tab":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.9cd7e927.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T+qec4eO5astyslwEQYvSbttgqXHEJMJLYUJDjPpeUeqmYa1F7RoQGLarLK5UK93RlWA2IBotZ2CIJhFQGP75Q==","shasum":"018470dac64425843eae0c7350590bcf43039df2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.9cd7e927.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhiCRA9TVsSAnZWagAA1YIP+gPlVg1WPGv9wqb/Uj5z\nz7T4tFVcl5qDEkJ6mXzN9UQpFToNollRX9kyh1A29Z5obHdbsDRGPUKt5IIh\nxEiyH6suNdMRB1yJS9fWT6+53ky2tyx1jlIs58JNh4IkGnp+GAXHTEnfkoaz\n9o6Du74zawN8LnpJvFqIFuWveHl/Gse4F6gMbYfysp+ofrEZzSV5giSmrjbd\nLYtx1fHwi3YE4fnMY8Yv14nD+v0GAL7ERPV7vf61G5FJgIQPBYeMOITN1rGw\nUowoCK/ilO3FOMVPj/Uw8yN0fj0gVS2yPZboIeqjzd37Xl/YQ3j1be2R0STn\no8yTxojxx5TaWGwl7ahFwMxEWnksWkL1tPXIX4Oyjg4H/mK1OiJ6do+IK1wI\nnqTq5XyuxgxNtHB1mDerEC4w1S0f1QZRU1iYhScnIszsiXNBfj63TQy/Ab26\nlOMof2NXbJcfeWUKQKmi6AqkYr8laDmWOqidTSlsn7VK/C8JXZg4Ktm7gdgk\n4U38nmd6G9JdTYd0TJp6OEuV0nkPRqLV/i2BkqnQryg+n9ycQTcarlKUv4Ge\nPHiAeY3MuDEIzPenOKI3fI/OgS7UW1zxYA8Tyjg1v/fNFm2ULQLhvHl7HOEj\npNX1gLPlpvOE6w5yue9ARSETgxzhdHlwIbqbMaol7TlB/i+5MP2NShHL2ntk\nh1pO\r\n=/bmA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6p0NoTYvU7wUQNNt3iAh3sytfyz6QRhV+BZVznP0wqAiEA/xqHmKqA+Y07Hy6gRmO8CPoTGass3PwUlGM3p1UufLE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.9cd7e927.0_1631737954648_0.9361923496350968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.a7132082.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","@material/mwc-tab-indicator":"0.24.0-canary.a7132082.0","@material/tab":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.a7132082.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-whoPYQToAM0Y5JLRkgL3uJB0gK4Fx2hIe4zFFDASZF6UF3OKLj0WWpDmOhFZEpXAltj5Cq0/iw/5YWTMT+/jMQ==","shasum":"59fd0b68d55cc1655ccdcc5ba86faad8285a3480","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.a7132082.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmeCRA9TVsSAnZWagAAmfYP/1h9Ra5Jz0EETWAc4XWw\nNroob2kaWYt8WFaBMzuMbXrdF2D/mLm2KVng3yDgDu0VTwMj+XnxHHtsHn+i\n6OGH2bCsMQhJ7/i77Qk/ExyyMb73kWUSt02QojYV5nC8fMFGgDTc8DgEJjoG\noRqMsSDvzY0hYyPqbIWFb7WyFie4mV0lC7lQWGM3mJ3w0ry+1/Xai9EtCExy\n0x2QarmHPIXIWGHf5Poiy8gzXvtcOH5bgJlJWXQdIchk7DtTPfWowK1VCb3h\nocdsTzm4R5BkYHa7vbfW/cVOkfWBN9PxR17SQ042ZjbQymcOq79zxrgngcST\ne31wayjgCAmwzwtIsC37/bVphEGOtWm4YhCjxdLUslXMz/l1XaolVE0VbKUW\n8ebwLlAU3dvzvUaEXPKi1MATPYEt5UOpIXgKHpbXetSJ5WjyBJTAs5hzvmRx\nDaYv3Vr81yt641yxJy0KY+kao840m99zel4KoAntjqJ3iEBWdtkY6W2L9s2S\nRoFqzDjy80txS5MhXuqmKKx6Hi5L8h2BZ8KsZSGh8fZ85nXba3HpHyEU5U60\nQ/1/Jb9aNfys743JzOdBnvTriKQiv4vUf6vRHSX6EwdIaDWKUgPl4we6Tyll\nUPj2R6qN7Oz0pf/LIBVrkCmLxcxTv/MPSa24WQchBRIQH64zd6sAkO7OlVA5\n3u4Q\r\n=Fry5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBVJiidOWpeNhIrmy+0qoDA1SC/1fmmPHk66pQhe9pGwIgF4D3C4XnwJ0I6zDTo6cLq1aV3yQslI6G84BckkYihvw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.a7132082.0_1631742366298_0.886174008927616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.cd9110cd.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","@material/mwc-tab-indicator":"0.24.0-canary.cd9110cd.0","@material/tab":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.cd9110cd.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GB9860rT6lm62X9TboxILiFtMktk5ra35uzo2NjcJ/Qgk0WdBifd/NT+U3MbV3/3FrA9BuOUI2g5RdFZu74YKA==","shasum":"63436aba1fa22eb3843989c2c790d572700d309d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.cd9110cd.0.tgz","fileCount":15,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LWCRA9TVsSAnZWagAAZt4P/jbSdvYhRMEg3PYfVVv5\nPpwHazvq7hXLNzXJ3EKAlqrVLZWT90bveiRwtTVGvHOhjBnD/ndCRGzWFEWW\nw5T051VUJNdG2ncB4LYnBh6Q/G5bhHBoXNcwttEl8tgX/WT3ADw+DtHD1XMh\nN0jKoho5gR5eHtFxPlYyWtSDEqvQoyTHkAPwHlbs/hcbKfhefWNRQ0W2k6rC\nEVsCZ2Xn8MSb87vigImrv1d2k7r1DwSgWhiIfRKOgzV9KVi6QnCKWwyqsf3N\n7uMjsZsX9ze4D7E929SpbpU7uU09KyOFPxp8NOEcxb/8UlY7Rwcty8CAAM6B\nZNRPr0UPJhNl16+xEixx53sB5Ndck7I76BRkffnZJnVQI1V3SVR3h0OI3eQA\nkoCWNHk6oWThaDgFNiwIVmyjxV/54RThOrb7l5+HQhrR+BxHz1+Zt0/IMAmD\n1xevI9IJO2Zfl9k4GY/FLQcsR+C6C2sc6feoFso5oEVa5YC8bOr28W3secnw\nJC+BXULc+jr1u8kNzuHG4VZg5R/edY/rYktvWcPFoYvfzXWuNymE4UQormBH\nDHeMFQ9DIgBL+d7ESaWCIJWaVfn+aVZIAxX0OVSbeq8oBzMwea1qtjIZj3+P\nJ2LcRcNCZG7UFrwJwHPzQj2PRfFdIL8eGeSXdFdHoPCwmPo+QB4Bse410Klm\noQ0S\r\n=qD7g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEq7/A609P8wJlGV3S3y0m6uPamzdVf25YBEmDrXaK+AiAXl3cA4C1lnlWVUefhI7ZJTjQy/CjxThszQjgVnn5aBA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.cd9110cd.0_1631814358470_0.18899413716305502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.1e5a9883.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","@material/mwc-tab-indicator":"0.24.0-canary.1e5a9883.0","@material/tab":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.1e5a9883.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-rYlpPHYyD53ODaE9ZamPsrUOv0Ps9RqRxRb5p1ozS8I2cjTm4okSXVNQaQhvBh0lpw0rFSm6Og/cuhvujP+/zQ==","shasum":"8df31954e65896fe8c59b6d2c3c9bd9408cdafbb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.1e5a9883.0.tgz","fileCount":15,"unpackedSize":65974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCidVMQzwX0gwQFejcJLOOpRb/YHMW2Vi2tj7vK96SmrwIgZHVbzd8Jf+YZ09JU1iQNeVbnrJqOTwGXMS9F8LWKJBU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.1e5a9883.0_1631911160696_0.05641558256086343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.32c830ee.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","@material/mwc-tab-indicator":"0.24.0-canary.32c830ee.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.32c830ee.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-KMa2+EqypgjZw80N5f24biaA2WFcpyad6SuLmBKnHyxUSwuIgR3xi75AUM9fvDfya9jsYlaI0k0nU/BvIDyD/A==","shasum":"a2ef1ef826502cd2eea18320624d2eb1e8feb471","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.32c830ee.0.tgz","fileCount":15,"unpackedSize":65974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbNCfjN2LRrmL4T0noBtm+0UuRQCSSji1DLVJnjeU5iQIga5xNiOVQcKKEAcK5XNwNRUxLc1bAz/nlu6a6JqGaPMM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.32c830ee.0_1631920139966_0.2810312088738507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.1de87bb7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","@material/mwc-tab-indicator":"0.24.0-canary.1de87bb7.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.1de87bb7.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-otlkFOo32E7BaXdEp2mgnk6PMWxGrfo8wJOVELqr0NprB2evFZxgfkO9o1PM2vpLaH0CBNLy+Hd/Aa6HKGL19A==","shasum":"f2b9da7d1e694e46868d9b5a485da1e1f379d851","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.1de87bb7.0.tgz","fileCount":15,"unpackedSize":65974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3b9j9UvTxhcrr6k6xbOSfvIb3hlxvDPhTu3685NqLdgIgf65IcJFhJCY7LJjjFx/bdHvsS8+ipCdOsFoABDXzhDo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.1de87bb7.0_1631991141769_0.4980982166341572"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","@material/mwc-tab-indicator":"0.24.0-canary.f2ea80c4.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.f2ea80c4.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vWPJojSOdKji4hFqNWVzzksY8IlKQzxGBN8cWlarXC1/mKy0i07ZIJCKQOS/StRIjsvjzEGVTyfo2YHTYcZcCw==","shasum":"d07e1339a5491a9daf670c042f4d61b020720c38","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.f2ea80c4.0.tgz","fileCount":15,"unpackedSize":65974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf3GTqoinKIc3GzqotpV0neVv6+sJa62MqLxBP7DlUvgIhAIDm08KOS4EwS3+7s7IFfh1SaScTctG7Hqqhtvtief8B"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.f2ea80c4.0_1632160507739_0.8028620906309081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.569d739f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","@material/mwc-tab-indicator":"0.24.0-canary.569d739f.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.569d739f.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-xgrPLYqQes5lyCGmacNwfh6a43grONw7CBu7sJtjSjxFdR6W60JgJSgxma+QKAtB+HHrmdMweJx1c4CI7f2Q4Q==","shasum":"3261431423e35072131a5884b087446f0d6a2a61","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.569d739f.0.tgz","fileCount":15,"unpackedSize":65974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDgfAt8fRYwAib+tZRuvvKMmax0+l34lx5ORF1wQjwmQIhANr+NuuQmUq+h/e/VciwcXbX4UxOoq3Jdd0k+jWYHqsv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.569d739f.0_1632173047139_0.15204550868899736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-tab","version":"0.24.0-canary.5a434a50.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","@material/mwc-tab-indicator":"0.24.0-canary.5a434a50.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.24.0-canary.5a434a50.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-bxXadk/Rc+FBXfF8441qGijLlVyH+WiO/7+7amiUReRS+PdlMShMcjEX2urHtkomq3hM8z9ZK7XAsmFyjXOhLQ==","shasum":"67615b63e972b5319866f27f6024a405742e8e4a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.24.0-canary.5a434a50.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoenn9ldegcNyaHkt74HlQ2pCdYuvb42y2a72NnM2sWwIhAJWq3EXPKonMfffAYCx4pibOoSivvHdTIHAla0CLqAnD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.24.0-canary.5a434a50.0_1632189660675_0.9592330560435791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","@material/mwc-tab-indicator":"0.26.0-canary.b1c1ab52.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.b1c1ab52.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-6OE/Wnf5iKRP4pR3JuaBgQsKyj5zP6AF0Gjt5IjjZNlGHvfO50s39lsH2LW1jlevWQ2/Nd2d5gZymvlDG2jwvA==","shasum":"94074131fefdb3086bac4a7339419034b23451cf","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.b1c1ab52.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk+JAxeqL32GOLSeP/GduK9HZ6dmANUAFxmrUiiqMqXAIhANKpJcEEuft1ibMkwHDP9cV5Tl5hpcgk7FDFlgKuKMSi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.b1c1ab52.0_1632193944208_0.4955093641150565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-tab","version":"0.25.1","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-ripple":"^0.25.1","@material/mwc-tab-indicator":"^0.25.1","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.25.1","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-9l5AGCDsJAxrlONp0dMPXrH7Gmh31kLH/2IbDeEFlK0qWcmNEuZnKSzdDtPyhmZ/NMGR9QZpTPV37aUf2zgiTg==","shasum":"1ff0d98789f6cc354a9b8bc61db9cec33e8239fd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.25.1.tgz","fileCount":18,"unpackedSize":80946,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoDPVgDc8ahMScmacpKq4yTW3CSqMHZTKKqswmt/L7UAiBzPDL3GES49BCdoYIPJxRAZkYGZYazsRiM43RntqWl6g=="}]},"_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-tab_0.25.1_1632193965711_0.39534627527023525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.ae060177.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","@material/mwc-tab-indicator":"0.26.0-canary.ae060177.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.ae060177.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Dg5DWdjYnQzM9spCuPsHVlOxSecCEhtB2sTmemo+FKUAYWxOds/Dbcp8ijA6bZunCb0Eecrbwiaf3QKQ18sQow==","shasum":"2ea061c056363caacda307f428267194e7d1fb00","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.ae060177.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtngR55nmi3DxNz6pLQuh/G9MWQ/kRx7L7QqUafoqSwAiEA31brytKSJZFbiHY7BlBvBc9vPK0WGc1YoQqajg78CHg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.ae060177.0_1632235101184_0.18474679196400268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","@material/mwc-tab-indicator":"0.26.0-canary.b6fe2a12.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.b6fe2a12.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-i24Ut/zxqJOCoqdLDKs+qWSCLYeJ4B6hOtF/ajFobM7cXYpoZq4RgrBy8fQUVbjnNL2TyVP/aQ1EWOsdcnRFGg==","shasum":"9d9ea3c601184a3b6bfbdc172eb88f6628dd252c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.b6fe2a12.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSeuTqPizD7vDU6DkWknscTirDQwNNAFjMlc1YzIIuAAIgChDGoHwGOFx4jryg55rsuuoI9/du9MjV1uml3R8A48k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.b6fe2a12.0_1632341790485_0.6449087761182772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.07e91417.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","@material/mwc-tab-indicator":"0.26.0-canary.07e91417.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.07e91417.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-AQ60faXVrkJkBgwZGuuzVd97Hj0EOrjA7KrxY1hYLUFWvimTNBqzIhj9fKfnHkhk832psruPBnEGsQrZeyrJQw==","shasum":"b13e1beded4295a45136cf78b076064923aef114","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.07e91417.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJd+lnXofx/KbTZPFBmsxroxIjRML9mE0oYw6Qkql/UAiBzHt1P29nI+glth71uPTKqCxLFusNbzX8n/bf4LMpeDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.07e91417.0_1632344762141_0.7227932920050066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.e2203ffa.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","@material/mwc-tab-indicator":"0.26.0-canary.e2203ffa.0","@material/tab":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.e2203ffa.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-A28oXZRhl7PYor/EBy/55Wq/3ybLBB1iKz+zwr09YuzhD+canB75TkjQyMy7JeFOEUNYNzhxNPDpMkD5NhlYGw==","shasum":"2e6432221a528f79e8d8283424e74c9f6e594b3f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.e2203ffa.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSwkRwUUSV2o/C0G+rrabV4QkgUeF61TeHEXKIYIwMfQIgTa7bTpc53lPjCkqBJyfAsD2W7tIhtm4GomjBwVz9x8o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.e2203ffa.0_1632421671798_0.5029145818006358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.4abe237e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","@material/mwc-tab-indicator":"0.26.0-canary.4abe237e.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.4abe237e.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YeFi3kpfsFCvyYmg8Si7oIAvm1wRrDZB1EPSr52VCpHTGhz45y+esdtndClLAuUK6ZH5wZNWYqSBl8NH3BS2kg==","shasum":"5eb7e709883ae7465023158f3dc0acf6a6a61b7f","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.4abe237e.0.tgz","fileCount":15,"unpackedSize":65966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTSR244R1EheTjbCe4U2tauBblxoJ58vAjfKCcsog7IAiEAk8shoe6dC3vuZjZRZHeemuhbwpODjUa8ECvB25XVT3s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.4abe237e.0_1632504682130_0.46008890462886565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.6278ee5d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","@material/mwc-tab-indicator":"0.26.0-canary.6278ee5d.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.6278ee5d.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-JtK1TUk16BRFetiVPk54/0bdbWbsh3IqYa3yIFDl1AYxcSH625QvyQSNQfpmuPGxCktPI5xtqVCFEZW2LeaCnQ==","shasum":"1cfcbfecce416b932ee6f013970329f03f632dfd","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.6278ee5d.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlaCAECC3EmMnkCHMrhuGnJA13HBE+hLmn9RFGqp4HNAiBOnO13/e+0puS2udj56i/K5WD6R1YSFEjz538E3W7rIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.6278ee5d.0_1632767495520_0.3129937515590182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","@material/mwc-tab-indicator":"0.26.0-canary.3a5d5f34.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.3a5d5f34.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-oFhuJ8B5IH2LkLNgsC6HXJPEB0q3CBL20NAERzkXBUstt0ZoTzrSkmZEebSmUaCMyYB+DGwF1hahbBVO5fWF9w==","shasum":"87c9d24ba5f8c2a3df4a7ad82c4e8b863aaaf0e2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.3a5d5f34.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHWHyti4CwZqGvZaJoloKCLSp39DonmlzZcYQ8YzdqxAiAbnA2CS1ElVyAdH3FURM49vQcbrYy57xF5yQABhEKH/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.3a5d5f34.0_1632782505114_0.16408675363126646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.143ed3c8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","@material/mwc-tab-indicator":"0.26.0-canary.143ed3c8.0","@material/tab":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.143ed3c8.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T0cRyhvHd8oamO+JtFGEZcIp5S6l5XCYmdO5nfvDeOS9xlBXcui57lz0D+MzPz5MsE1kru+S3+rhA0iJnf/FRw==","shasum":"298be2231d025b41de0fb2d8c999c9e9b848e462","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.143ed3c8.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/Zw5JfbpbPGml4hNt9pGSFSw5gIN7SZfqlh/CNR7P5gIgIW1JUl/LeQ+/QxqISlR+v/SjGmbGxYrgNaRyYBKDtA0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.143ed3c8.0_1632880264627_0.00433138889651663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.e5923d68.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","@material/mwc-tab-indicator":"0.26.0-canary.e5923d68.0","@material/tab":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.e5923d68.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MJtcqa34Q+RIHx5T/7pLS52aI8/GvZ4bNgcPw5DbHRrdS5Bz0U6POKUMiYOpdcboSnHxnTzOB/oepzo9J9pSpQ==","shasum":"39a57a9e76c95e2129a9d19a6169e4444debba34","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.e5923d68.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkGwCyPyK8RFW4nr1Dlk06jQC58YLE9sULJiP7mqWd7AiBizV1ajtOb4eohRWkgK2JdLUhJEMrCePUJbtHcuh4wjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.e5923d68.0_1632960363497_0.7188755007161236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.d8ed5109.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","@material/mwc-tab-indicator":"0.26.0-canary.d8ed5109.0","@material/tab":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.d8ed5109.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-4K0U81gs2a75J2hM6iPR3RSiHmb7ueyQww4uwHqmoIcsAKWYfdjhosiD3dhy/EOl4Lg3HFyygWZEsEa0yxEFVw==","shasum":"f10caa43553f95b996d29d490f5df6d85271b2f5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.d8ed5109.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL4zUqVEQm9v2FJq+RQhROi4XnHclcJQL4tZ9s7IrqiAIhALX130N6/XS8wVVb/9hjAUz/qjB5+su41Ksm3aJt94H/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.d8ed5109.0_1633044846929_0.3304944888814314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","@material/mwc-tab-indicator":"0.26.0-canary.0efb9c2c.0","@material/tab":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0efb9c2c.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-/9g2H+j5NRNtDJ18/q5viky+elgu8p7V/BMqtbffyoAutsieJoPHEyOgrLcftL2lTmk1Hs/R4E+BGqQio/MIWw==","shasum":"16e18758c8feb51fd6b6a0edd139d3602d501b05","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0efb9c2c.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFAwNq9l5k34jZHhbOX6cHfZu5C0eIECi61meACnIbcAiEAtshbHiWYj2h7cQsc6Pf0xczTtyVFVEXWMSBsHjEJIIA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.0efb9c2c.0_1633140510254_0.06968013579526189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","@material/mwc-tab-indicator":"0.26.0-canary.1c9adcb3.0","@material/tab":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.1c9adcb3.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-GwLiAdiLFam4/Vbg15zAkHqaQKfUYvOlBLkARK+eyzrv1ciQDNw1PzBaSuLO0O6jFpZHjajmLp8qzt+Uw0tRfQ==","shasum":"d160d4185f16aa4d77b1a376f6df724e22ccd370","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.1c9adcb3.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl6Gpym6QneEU6T4nGMaD9xHwnPCiISs0uErRctrKBIAIhAPVXUa96pv3UhfUBni1jxKbP6EdfrImxfjCr/vnMktUP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.1c9adcb3.0_1633368826879_0.8620787028635584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.dfc00d60.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","@material/mwc-tab-indicator":"0.26.0-canary.dfc00d60.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.dfc00d60.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0nCQ/YYAhtm4BefqukSjVC/OIIysMOq9V3zqN6PLk8+L3u7gE+tNWwBEWTU82gkw+8juDKLnGyzrAMZwui8EgA==","shasum":"ebc3e62995d21e224271263fa5c420885590cfc5","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.dfc00d60.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUVHN2o548URdHCSlyN8Tl6nM8mIf5yRBePFspLnOU4wIgIN7VDeC7/E+pJZ1JtlF3Ch1UK67dBQlLL2OttUyeRWQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.dfc00d60.0_1633741058449_0.8158948041651206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.c3aa844c.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","@material/mwc-tab-indicator":"0.26.0-canary.c3aa844c.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.c3aa844c.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-y8EHnQVJXfijAn1mUSppuPnl3+VBG15kkqln3HNKW4vr1crnNCwgV0mfmic/VIjAES2xnDOMTEUx9MIgUrTWjw==","shasum":"3c2cf28c7353eb79b4874e4f1aca450b23d336c8","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.c3aa844c.0.tgz","fileCount":15,"unpackedSize":66016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFYhUs3HAHb5S9jalUoLA4+jJ756u4D+Rnrpf4QKw1BAIhAOXHE8mrXh8Tj2CfWriQlIHk/Wtak5oSJkdV4/cIdENO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.c3aa844c.0_1633994074560_0.05349984120472828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-tab","version":"0.25.2","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-ripple":"^0.25.2","@material/mwc-tab-indicator":"^0.25.2","@material/tab":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.25.2","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-q5Eo60YG6cDzj+I7FchT1wW1bCin5wnF4KLcqamPGGlG+7l+MWuNG3mmX9e4dMTQMBdeB/0osO+dXLd6nluXww==","shasum":"94c0b0d71da41067f0cf6ad6fa5beddde063a6e4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.25.2.tgz","fileCount":15,"unpackedSize":65930,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs76I6+3Kx3oJUZCBmwpBuAVd9HIm7vojN7FdYUOVmdwIhAIaIssAlh+MbCuq/vzlu46yboAmpokRMO+GodUX4mMcR"}]},"_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-tab_0.25.2_1633994313324_0.8179343158995078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.406d6fe1.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","@material/mwc-tab-indicator":"0.26.0-canary.406d6fe1.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.406d6fe1.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ajAHcDJvs0b3Dpe+iUmR2MfngwxYQBX7QTsZlWjHi+Q0eakCYZuhgvQNugqbjT9XW8ATL1odRzrKvJ2lmerNyQ==","shasum":"3499081c2b023fd0cd8bdc4d3716c9dc8b2e1574","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.406d6fe1.0.tgz","fileCount":15,"unpackedSize":65992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEoH0149Q8N+1DfvKlBneMN660oGrMAV9O5QQqADUYJAIgGeZcSGPziWZPjst6bj140aorrMoUPKhbdTFO75FUvpY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.406d6fe1.0_1634158782504_0.5618164712516134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.ca0a674f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","@material/mwc-tab-indicator":"0.26.0-canary.ca0a674f.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.ca0a674f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-h24yUqo5sQghUxZLA0tDGHfyO9juzWqovzaUh9BOqICRMDxz75x4N4ftZVdTX6WAJUBDRvZOGGemd2oyoHBPiw==","shasum":"fdb3f893e24e59a0c3c11bfd0906040b41cec40c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.ca0a674f.0.tgz","fileCount":15,"unpackedSize":65992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvME8Z+mHDurYph5noPzqjwVe20TojWC0bCvPuJriRoQIgILvUWaQdGDML0w/o7Kr9mohM9RjV47meIiMCxPxCzJE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.ca0a674f.0_1634593030465_0.0865146202443452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.eefcf660.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","@material/mwc-tab-indicator":"0.26.0-canary.eefcf660.0","@material/tab":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.eefcf660.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-8bUHHoa71HLkzL3KdyzSIsFdwNOR1fS7KJ3gAHxAyu7UftBC4LqL5x5vhXPWl5r+7VeUdlYTNWE2Ti77LqTS/g==","shasum":"3d4bf49044d88e131fcfcdb2b144d8e2460a8408","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.eefcf660.0.tgz","fileCount":15,"unpackedSize":65992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzkt2sZ4ZW/4NYGpV2+W9ePYM5nWSVORRul7AYAUPvxAiB8Z0IwASjDG9R/ho6LzoOYOPNSQ6Ck0H8e0bvLWjCyGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.eefcf660.0_1634765030629_0.19961873472295255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.d21acc8f.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","@material/mwc-tab-indicator":"0.26.0-canary.d21acc8f.0","@material/tab":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.d21acc8f.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-sb1kqnMA4tYQSb5sTkEYsP7xFP+UmsNuHwAmBzj3g526wGU2SULVXiZKQSivtsL1v/iaQZniXY2ybFM3ivnLig==","shasum":"8f6cff13cb50aee5945a82992cc9a8a116ad89ff","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.d21acc8f.0.tgz","fileCount":15,"unpackedSize":65992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEc9Z/i8Vdu09L9TvOWODYM4+PYykRPjj9kJDLBcFADzAiEA9nVEHY8xlLSQkEQNq2e9p7n5bHOCO7J1c7J7Ccqg+as="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.d21acc8f.0_1634769163177_0.5334917611079308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-tab","version":"0.25.3","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-ripple":"^0.25.3","@material/mwc-tab-indicator":"^0.25.3","@material/tab":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.25.3","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-BHKNBOUjCToPyD07Y+puRF1ttSusLAsqAddDneGSzCOILoR1M9mQ8JIvm2XJ+eirqje09qg6VdHnJJWCIPH6sA==","shasum":"dc76c6cee0b135b2e263b27c1b5b491a3d099147","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.25.3.tgz","fileCount":15,"unpackedSize":65906,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5EfUArb9n3SZr1Hg+Kx5gMNZ5lPsbQCXuz1bo4TX4bQIgftP/qjaz52+f5M6AdO0TlmXBT8gJoe0Kc4rNTIe94nY="}]},"_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-tab_0.25.3_1634838944517_0.9622255852688906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.60449b7b.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","@material/mwc-tab-indicator":"0.26.0-canary.60449b7b.0","@material/tab":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.60449b7b.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-rwg4nHxCv4/7MtHR6b0iWEJrjehB/F0hDMO6/d3nk4H7kzD+aUv/ygfCdgfQYkxxjF474tvNeyIJ25PswjW3Ig==","shasum":"0cfab1fe1f14ee1aaadb7287eff806cb625147ff","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.60449b7b.0.tgz","fileCount":15,"unpackedSize":65992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZQG36SwVPcRq+z5SwxGProBKTPU4kWZcDu+Y+fse8uAIgMBtqZ/R9WYkVn2f/ixPx+lcGZkY85Muppd2t+MkbaiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.60449b7b.0_1634840262688_0.13797400299268592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0d8084ed.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","@material/mwc-tab-indicator":"0.26.0-canary.0d8084ed.0","@material/tab":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0d8084ed.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ALWAI1dBtd+KMvmytgI0evACj7Lz8opm0LKCYoPi9La/nWURtbOyoqhOI94tLAYeq/aPEioF6gW4NeqP3gLmsg==","shasum":"286f293426acb031b131b5a9e7e10707941db300","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0d8084ed.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXJ2Rk1whgutivSbumTXwq5vmJWQob3LHIvUWgeoXLZAIgatYDy1MuUT1zIRH2k0oVHpqMcH/tGAT9kbZe6ygcJHs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.0d8084ed.0_1635443109202_0.1672489418463312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.232327ee.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","@material/mwc-tab-indicator":"0.26.0-canary.232327ee.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.232327ee.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-NqzlRRFtUtTGQtF2tktdsLxmTjfL2xi2H6orEi5V577JWnh5iAgYKJhGr1+RDuxkgDtn18TCoqbzkBh9W8LmrA==","shasum":"cc4a53da4c7d406935d4e5237383a32847f1e446","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.232327ee.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMFQ8JNg6XPXdlWnf/uyi3QBEuq37MyYvp/OsWMnPKeAiBnWL3EjveFt9cWvtHpbUdVdO0VL0V4WUhlB8EDVGGyCg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.232327ee.0_1635797760280_0.28191221175410264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0a492ae8.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","@material/mwc-tab-indicator":"0.26.0-canary.0a492ae8.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0a492ae8.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XFhAyHbzAn/zMxcn2BUglJr4EDF03PXpZfn1/V3iauAO4k4IEE3g8+OaJCdNXHkFpE+F2kp8Bhq4WQwn1B39jg==","shasum":"ba87a7107640daccd66dfd65ef3abb19b1de0587","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0a492ae8.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcdQsyRjB41Igu4oCOTFEAOJHSuaNrCktf6Qpgdg5oZAiBy+cR/Ya3XC9kz2aF6Qo0WdD3SZvN1OSoy+qO00CMzCw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.0a492ae8.0_1635847238128_0.502124436149582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0aa18745.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","@material/mwc-tab-indicator":"0.26.0-canary.0aa18745.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0aa18745.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hwjEUGthsCG0VfSuDwCIhsc8eLkROW6zaasaGE+iGIoa1JSqrxObt/hnHgN8mWHUqQOnXPuqYlZsgSyyZPEkdg==","shasum":"a6472b2a702f03543a9e4073dcd2541f30d678d4","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0aa18745.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYx1IxHPL7LmSn34tZdU9fzSMMdvxglvC3VXjJSsRH7QIgEEBisILvOxaVzRc7jM9pOJ8RXlX3HGUncQnU2ach140="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.0aa18745.0_1635876485740_0.1278257094294839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.f3e28323.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","@material/mwc-tab-indicator":"0.26.0-canary.f3e28323.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.f3e28323.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-zsLb+VCUoWR/F9TdgEahcgUUdGdD741EUPWinO3H3YhUSKSGrQPnD/4e2cWlu+lLC/h8s6fy1qM0zMwtYu/RaQ==","shasum":"7f6b77ee9efe13ae9270947b3b9a69aa014a2e82","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.f3e28323.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjGpQE3kURjwMn8NaeD4tf0snMXNu8aGhmSoe+GiX/OwIhAP9z8DoMJhEdhonAX+V2xRIo7XmC+/DJRWObg3bx3rH3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.f3e28323.0_1635879588121_0.8226212456832056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.27e05c5d.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","@material/mwc-tab-indicator":"0.26.0-canary.27e05c5d.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.27e05c5d.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-rd5l2BiQ6hCs/5CtBd5qe99FMaom/tDrU26vqri02MO2yHJ+Jm+3/yu+mhgwy7pgZalFpGLGqVCabTeSVXAnfQ==","shasum":"6d5b8a7aa720318063f3c26920e19f28355a4ec0","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.27e05c5d.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYELBQAUo5OcrWmNgrI9w+4CejdfgdCwqByW3SPs9XwAiBCubhVDo0eOmpHr9e/h8NtsWhH/HVMGDBSfsOE39ugEQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.27e05c5d.0_1635965113408_0.7115163751611946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.b9e44af7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","@material/mwc-tab-indicator":"0.26.0-canary.b9e44af7.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.b9e44af7.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-8qzuSZPUvYUrZgbkGTdcfcxwYQs069Eiv+B5ZuTA41CQd+79iZ2Oikd7p4rRQWKkxALYXdHZXMO8DXAaZCTmLg==","shasum":"09472c4f7cab2a97dcca206e040e144232c21765","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.b9e44af7.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6mF3hJFsW2gsd1u6bHAXLDvVjkNst98hoSwizZbUDqAiEAxfeQNXjN9nc4U47vdkHqFA7eQb9HHI+pwbkGRv2Mutc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.b9e44af7.0_1635966256412_0.6095036161501217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.448f6cb9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","@material/mwc-tab-indicator":"0.26.0-canary.448f6cb9.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.448f6cb9.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-kdiDKvR6TUmsNWVx8438cYiCcNkJOgeO+Y0vD9KOqctvazAEUAuhhL862hjVYtgarqzszOX3ZP1l023KAHlHJw==","shasum":"902a2a76e5a1a149d1e822bf10a227f247061d6c","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.448f6cb9.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6SCRAtjLM1r8JDCGW4R49DQexWnfhU1WRGUH0FtcN3AIhAJJ0pzjEq9wUXVmmMNBRhHXiH3eQHdFPaWAI7BkC/F43"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.448f6cb9.0_1636049288828_0.06843185935249751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.8067ce28.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","@material/mwc-tab-indicator":"0.26.0-canary.8067ce28.0","@material/tab":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.8067ce28.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-URAY5HDuE5/BENuNsBUZlhKhiTh0I0P6On7qG/GOSM/+L/KP3F/B/Tu3ZPl1e3h70V80H1O1bu6X13734mxTuQ==","shasum":"f49c5585d85ace8a91f9f224a33b71383bbfce84","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.8067ce28.0.tgz","fileCount":15,"unpackedSize":67167,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSFnNADczFk2h8HzrAQblK+1wjzBzo4klsZO015K6VKwIhAMbmuc9OFk7Q6RQviKvR4nnU/uxVdq5/SwO4L4UpYESl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab_0.26.0-canary.8067ce28.0_1636064561255_0.8158814809625776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.345c2bb9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","@material/mwc-tab-indicator":"0.26.0-canary.345c2bb9.0","@material/tab":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.345c2bb9.0","@material/ripple":"=14.0.0-canary.43d08ba77.0","@material/rtl":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-n6IG6Ol2KXRCBQrX1TqqC8EAsb/r+ANZ3mC4490dhyjuP5Jhveb2wTiSh1iq43P9vc/XnjSJk36j03aS0JMRRg==","shasum":"8efee8397b60ea581c343530526bd21c38dca466","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.345c2bb9.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4JCRA9TVsSAnZWagAAng4QAIFxfHb/TylqF4G9sPG6\nhcjwUXFvqyxuxjz4yXfK5U8jQjtC2m24HWhToXmDnxPTU2YxUydpPoau6Kys\nHpll6Qrkd2jik1shqJwHSuYXevKruGAajCERMthHCrClsFaxpVHC5Or5iHHX\nyVYVHY49L9nHQhgSg1dyABy98/We28LNe9bprSnEBzjQh5D/XCcmAL5wipFy\nMRNYc8awERhPJUM/td6MOM8Wews53eaSPEo7dCpnR/RZjzX4YbOI6ki93mC8\nImhjuU/qW2PprLN6V08Ir3tj29y2ZyVjfZ7UpxbBdVRsPXfpkJn4Mzgd0bsY\nFv5vwCYgXArmMmwHboAWex4NcZdOEbnG377LiqzOPE5+lAM6w2f0FaBVBYUx\nCyjrVqX+LFYdix5XgErbcCeg3C9/6pjvQyKMIiNppAye0bvEv0JRJk0u81s0\nzo8l1ujKh5oeHCLw6y6POOgcxPxruQCeRNsKgOTOLC+ADH7pXkg+FIo0Qfe6\nHljixJcaLtAej22q/ujzrE2CqKWnOQsM5MosT1t5dJbZ32k3LhJIywx+J45L\nIhyR4Z0PXpVnu0SW9yjo0V0eJP93CTeL1Khyrf+VzXwS2ak2NAK5wyfcW5GJ\nuuxWGP6lKjhnR/qphmkqg3XpncY1LRaaXseJJRqFgDquEAiaOWcHToACWADG\n1isK\r\n=sV7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApjd4RhNU/dkVgo7OiofG9EX1KDYcA9LE14bKs/Ax3FAiB1nKKbrhaJfANs1+nnsPetZ04K9n6XPZOfP8A2JvEs1A=="}]},"_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-tab_0.26.0-canary.345c2bb9.0_1638465032782_0.8555199054313505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0547aeeb.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","@material/mwc-tab-indicator":"0.26.0-canary.0547aeeb.0","@material/tab":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0547aeeb.0","@material/ripple":"=14.0.0-canary.17a072535.0","@material/rtl":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-vHJFBPyzqoU4RzV5xUZjnRSLc1HFO5JCwwOALFjsWvsxjGchEQ8r+Rn819f5OK2LUKxLbN4bFcqCf41aGNLiog==","shasum":"afccb850a949a6107313fdd3ac794a85cf27f6d2","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0547aeeb.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwPCRA9TVsSAnZWagAANRUP/0gHEEljXry5aKtP1bjB\n4DJ/1vBUx9CBnialencOnzZfDx1UMm8OzVeUIo6gXQJoAa/RorB/QkwWH8WZ\nZTGSEq2JsJQpNrLzZTjYOvphT7OmKGZzjZGD/b3FZIYqF8axPHqTqOXoz62U\noVRA1brcYsuaVB1EqlQMd28zA8ES89v7+qAKsNsE2+IxkYgeoozZqxlRTJHG\nijtEh+qb9cCMJNxMkBJMU15ReFB31jPuxiElQU1HxXaSvgUDOdW8793LK0sJ\n5oUf5mABP1gdxy5a5Ur0K65W2+iPbf2tToDhngb5yObtPHGfKkxxK4MAQuKG\nfxSUlugQcwlOPd8CvkjgsiSzrJUK1W1WMgpzGVgoFDDukt9DXY74nL+7kiGq\nIdAFP9MbqLQC3XPxM0Lv6s8auEPdbLW4N8m1cl9oqdOHxu02VgH5uzMHdDo4\n/fQjcmC5VpKS84/mmN9LGJjI7ha+E//KwU48VFeyJTFgjdLk/gWTl8QydDJG\nUucDQqXrsjwSED/w9cTK8JNrGIc+5ChjZGI837taegOd/s0diJTHBi9zvITk\nzQNsMTn6re0ZjiDdQM2hmqq2e6dQU8jpuZ+F6bycyZWz/mHVum3V7ugpoGuj\nhNqfsdqNVSXkXqevxlq7f5NC3lOC/JQQTI3Toz+yrFDjzfVnvsPpVSApusBH\naiHR\r\n=2LMf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMvha79bFL5my4jcbcXUmrP3kfc6Zf0Pz7HCYnt94EzAiBIvAvUBI/VAmArHu7Mxxz9gV6I5zth/I6rTUL5To+9Iw=="}]},"_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-tab_0.26.0-canary.0547aeeb.0_1638808590968_0.6575162207431033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.3b2452cc.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","@material/mwc-tab-indicator":"0.26.0-canary.3b2452cc.0","@material/tab":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.3b2452cc.0","@material/ripple":"=14.0.0-canary.b6510c8c1.0","@material/rtl":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-n3TGbaAqtWjuAoAzq5188v+mMQ8Dtva77fjy5TviVQNqJikq50p1b5lRNpTGycflSGc1X4MhfRc6TBJFfl5rHQ==","shasum":"214a0ec81d7558a20a3db0f1ada659bff832f383","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.3b2452cc.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhqCRA9TVsSAnZWagAANIkP/2u0snEgcQKxEaAfbRbJ\nNcSILZZOWvY8grD39BjAzxHgPoxpCmuLJcjNarYEYldgRY7Grd8SWGzupekM\nhydsvXCl65WterPl3w3riZD+oQMPJaWhA0RiyeklO2DswBX7ngoYThJ8YU1y\n8Ouq2BV9TKigAjNX5STOVrNiIaYdymAmk7rqrwDG/3BPWI9e+gViNnUFZLkg\nnSgpJG3QVqdXK2+nmZ0iM9j8T3z+S6Td1UuuAKavfh7R5m+olFxzeYsu/9P7\nPdk3q0UWq+Z01Q9RtWWgnZn5MTgukf0fI1vRPtw8APk0s0tSbtC6UyXInjyG\nKxjWvA3Br86ZaVVsZBHoLP94e0BFABbChGz/vf57D32SabrxSO15GQLolltT\nRGwi0SKgxtjk5sLQbObt7KUatC6kIMHzK5VSMG+X9nd7Md4WjHp+qiRS/7or\nr1Eswr4LxqZvnWfc51/4k5F020cq9iipwRmarY1Gc0nFSGa8dA91aXP0EjOF\nL1HSk6gSCxadQkY+z5Z7HZomRk9hVx9gyVW0POQN6+vaZghGjTuc9lKkcIbs\nFt/BDsoUjLi1oknh9qerq9aJL8vTurzQ/Aru/Hq2X3U0SCHP1Es5DKIV1QE2\nI8PgAYGZzOVciUgWvWEXkNLJffeny+Pz6OR2gCcBidwPHaxi+dtyX+eoAxRI\nymE0\r\n=TNZv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCARFjxa7bOSYV9EUbbnL86ns0N0+wGjthm3AOWEoWIVAIgMAJ2m4Bk0tD5B4PaYkmmeFQVG5f8jaEFlGi9dzthL/Q="}]},"_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-tab_0.26.0-canary.3b2452cc.0_1639008361960_0.4732961027868221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","@material/mwc-tab-indicator":"0.26.0-canary.cf7ba5a9.0","@material/tab":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.cf7ba5a9.0","@material/ripple":"=14.0.0-canary.f460e23da.0","@material/rtl":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/wNK8YPdKpoz4pJU8Yf9imlhaILsD2wH/TPLxHrSGbQ0RA/JCc4A5HMOGOMclXpzqFsB2ysTbr8e2yPd11OAPA==","shasum":"a49195d59d694468e71efd744c045a2f9853fe9d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VoCRA9TVsSAnZWagAAWfEQAIGUQrHURb+tj7sn5Mkq\n6qmFoXIsWyhOOLmkA7g++yLqmGfen785l5M2cHVpxoKa9E+Uwa2xHxAHYvRl\nYMW5+HYUf3Dx9yBvNXMKnu4IvTFQx1xkPQszYOxpRUVUhvpkp6pWIJ17laPX\nNmcHNaKi9uaGEUvmVpd9HeorscE0CbwWXBscjXwrDYHeOO29fDNMI3HLZNq4\nGkeazaxyvujjbipZtr3K3aCaQe/PDghndO7r5z9H31gj0M0NoMLRe/a6dUzi\necrk49n24DD62H+or5PH4mIrIzb0AKSFnV384yoOA1P51Ya2pe1AyAAfXxAh\n92mx258wT/kG08MKov131mv9OuqkuWiXbOWN+/MJeCu04SW35hOwWEZrT5/R\nEYM4asth47KpqEBtgcw9gvvOhTw1+JrbH8y0MMfOS9/luR+bpzek5UB3VG4o\niVRRH4XuEDTJeK7DlOiMOlDoTLEQGjS4lH3x92kWavsbivKBx1Yz9ewuQSdT\nBR7SCTgQlnMyu9vWRlqB9olyn1rZDiff/XHawvqcd89/OePn70kOBHVEyIp/\n28+d9Z84NIj/x7Ymvm2b2Ot3D6+TGjXllSpbqUxFp5fZ4U0exay/X17z+ugV\nvmJRp7KhyRB2k5ja47SBjIu9qN484mFd+exeXG7X1YtxLWs44fjsm9nmLhto\nbENB\r\n=/Pe/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH26Eqhee+d14SIdnD4N3Mc6Qw4d/p7QRvSV4wFJranCAiEAiQxmtxAN0unUVIHrLhBDrfj77bPrGXl9aLLYBIVktFc="}]},"_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-tab_0.26.0-canary.cf7ba5a9.0_1639163239895_0.78755945198533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","@material/mwc-tab-indicator":"0.26.0-canary.e1bcf14e.0","@material/tab":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.e1bcf14e.0","@material/ripple":"=14.0.0-canary.3366a71d7.0","@material/rtl":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-0rsl5O+7QUJlgOL303PlWdfUF1rbcXkYpaX+D3pkBSYFTp1E4tUGYsHMH3+lf1QCJeAKrYJxd3INzYwZ8D2mvg==","shasum":"90dcd9f5613e82ba279d6539b206e490f45567a6","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.e1bcf14e.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eFCRA9TVsSAnZWagAAYF8P/iQMYZcKFYjzYvVtbdnE\nGvrVT0R9W6w2rsgfjm2hehER/ANhaOuARP4cMw9MxaZC6avW0BU8cMigcx/P\nkmm8vXN9iNNGgdcuTYNx5RjvI7AYNAJe5v9+ek2hC6LLbEY9dtBpkFqAvNGQ\nRLh4MHXaC5xh9Qla6LOLZskLb0oGT8bmRjCRoW1KwiOzKZHqj94LXTuZv4Ra\nNRR4Bgy1svNP//W7L1kkXgexGpJz3VhIZj3nL/JKX6ednYM+sb9kd3cHRcE4\nqwjh5Zykf3rtcXtuBhiEjROSOHfLX+hnidB0h+dJYphhZdctN7bnxdPEEVrQ\n2uCbjm0eeDAk1FIEJ0LRjM2m17Q6z8BDJ2ZHuD6LGF2iVK11RoIQ75cZ/7c9\nKykAIzZWyoLSbe7dq+xucA0s8pEAsO2p4tCuhxWyVpyQ/3lxQM4J9AmMOPyA\nlMI6Fh4AjU4YE8ZQKWXjXM4N3hSu+m64TdR49hctAjPeEkmvrVBt5r3v3eFf\nsq2u8wLlZBV0WQUTQ3cBAfz8EsQOyGDjX/9vdPBhw23crKQ2kXd595lAJD6M\nSTkDRPjzFktmaeYbWWi6m0KUioxohNZFykxrDaWxhqRl+Ud8mepv+m+WN2Il\nN8fboCbxx6Ybse+/aSNOoK6SlJMD4nmY5f2zOKuCCXjs0mPtYIY5Z+Gs5P5h\nkR+c\r\n=gIek\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN7WwhDHu21S8gukhBdcOySc+OMcGg9rkkLSCD5cs72wIgJLoDOtkuY+KLS3/YxB++ebBXxuP+j0fKk9UzsmujAm4="}]},"_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-tab_0.26.0-canary.e1bcf14e.0_1640724357816_0.37259713387078475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.b9d35b69.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","@material/mwc-tab-indicator":"0.26.0-canary.b9d35b69.0","@material/tab":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.b9d35b69.0","@material/ripple":"=14.0.0-canary.c047f7c19.0","@material/rtl":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-7lrQoKnGyNGaiE2r5ob+zaFD4R9f0xvA6mk9H2nbB8rJkqMBE04I3Jx+NKmodxxXCKA72ulF63UWgxEL2VHfsg==","shasum":"8a9cd2fdaa130f2c0074287283640dd179306bfb","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.b9d35b69.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMSCRA9TVsSAnZWagAAYyMP+QE9WbfhdMFqPazABENn\nChnROOYRTA3HdmdPkpM57wjlzcUyW5ZxfF4ZnkqCGOkT4CMq/sa9iSc0wY4X\nKmyHKtNuNS3FQP1fs2/v4eDuFElc3K/YfdHGO9wHTzLzajuM3/KFJJaYi73Y\nK+c1iap34YXpvMREwjIG8xOuiJzAloGch+81Z1gJQCh21ScderaYeXq349Pd\nX0MsioTc/fCyBFG9wz3o8LXgmpzFYfexB65hID/2rLgnVKWuiOVC5Fw1dzYQ\nQdDuFguBCPMtLgbBX5WKEOPJGQiDhSGidqbBKAbuw7sRlP+1yWE5xK9pfHDR\nHoy8xyydFLLbwYRM5DGjx2ZcoAM3DW594Jtq720LkHUf0KhsDocw9E4sLSah\nRV2jOJJg0hqyL+e/jZM35DrVPp4iuZwE/x1d12A5XX6dmviaQxg7pn0/jl47\nIieGqg8AyU8iIZYDKVfq2A79YKr/0J0i/Y32wQVOsCVjPHgdntEvsT3OV+Qi\n69JUL8zuct+/1U1W+kMNk9ZnhDllF+yi4ZJ7VHTgt3s0imNritlKVU7Mdfw5\nvSBVhebEQidwyy6BMlmBxY1+U0SB/ririNC0Ybe39PJjWNqC8p9NDbEwUV4y\nSw4LRXFALXFryXQCcyfZ+c7tGBiWe9JTUjonDNHcMzrRsDJrtCVGVsMjAQ3E\nGHCe\r\n=gC5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHV3tnPq9xpJq/sSeFy7A6zo9NIQ4NoBtTpMTrDZMPpcAiEA6UVKSfnKj7Yus2HaEfuhcf8InbA8xe1jz2qjMAo7L6s="}]},"_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-tab_0.26.0-canary.b9d35b69.0_1641407250117_0.7308131710235051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.2afff08e.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","@material/mwc-tab-indicator":"0.26.0-canary.2afff08e.0","@material/tab":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.2afff08e.0","@material/ripple":"=14.0.0-canary.05db65ec0.0","@material/rtl":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-PkSryaUa18PFaHgEwLeA1CC56IjtnMSop7cAhBkwr94+GILiVnxVfgiz4Xga1lOR6it4KCEDURjiWMspt4aaww==","shasum":"23e1c7c4fec18cef90404262aee4daa1a5927668","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.2afff08e.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vRCRA9TVsSAnZWagAAFnIQAJeJoIlTQ1/XHkroy35L\ndB+Gb62Y8T9YkPWx3deyBwmU7Hjz3QQ/hRJMRNCykXXhrPvZm7P2iZkzsFZF\nmh9Y71Jy0jmcfOHlD+u9mYCMbegZi6YjY/BsWEWmtktY2NA65YLEU1tf4GbU\nVI4AjjfEASEOux9IPfajDRMGCAVShqQnoRK4od3GaQjy30Uc5TdiMTBVvJ1M\ngACRkC7d50gj0rI9KoYbi1G2EFVtGm/BLn6PJLEoBkbekqWdpkEflWaTq2kb\nHXomfEA8Vl0edDyPT58xvvqi06aDSJMJcoZsZnwufGiU9tGCzlBcZAEPTD1l\nyjrXqvI9CvyzDt8B7AgCaGoCv0EFAQIRi3lPrimGdCyOguYxivV1yfG8PdTV\nAHescPAjS01XahnMOm/s6pgEziDvqqGOgW0C/fRCPQ9oVhb60JLeY7eNvRAC\nD2XoiDKdv7xsq5bQLEP2yRjvaA9pWmoltUvvD49vId+zXvv8RMw6/JDkENK8\nlxvV8dMpwl22vLNAmJdioBJJm5bZm+/WfDV1qRpaK0Ff+J3H0RIOfiipU66x\npA+E3SpNMOnbIhGWMXLMsuwr54H+zAMAYh2KFbau1rhR8U1psXdAGzW5SGk4\n1JQx3GCUGnMeDupMj4KDJMQQxIhS/LnQRhzy3IYo6ZAVTTkHPZq6Tf4tCLNR\nq9NW\r\n=vdXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLbIHX0G1ULvglpn8FPJ4xRIpSGlR38K7ZvCyy/i3wzAiEAhz7na5Bj1t3d/13usRztAxbK5E/mEit3qDclBz7/Eqg="}]},"_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-tab_0.26.0-canary.2afff08e.0_1641507793781_0.22063933042648975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.893fc857.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","@material/mwc-tab-indicator":"0.26.0-canary.893fc857.0","@material/tab":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.893fc857.0","@material/ripple":"=14.0.0-canary.6ca8b8f85.0","@material/rtl":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-mrk8MtZrcs0g3lrsUfWptyZ3vC9hY4+VzEPHJcFq4SezDEvRdr+7LF7HZ44Jb+LXW6yoLlpqlutoZRnd2sJzYQ==","shasum":"784fbde0920dc1870c115bac96d5b0352d9abf15","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.893fc857.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxUCRA9TVsSAnZWagAA7QkP/iAWTI7GvPLBVUOh+Ave\nNiRikadiQ3K4XG7pj079MihVioocUM+agxyw5wRRuzaKdO7mdZQGoNa88ybi\nz0NsrRbdfeR/NLtQqJb07G+5rrxV/tsa5Wja5XefUUUnAezDi5y4OjRxnhNj\nkR8j5kUFoHGGaoW3njScNWZIedFO88mx1UtBCBJnS4DDQ4dry1UaDMZHJFUO\nbLu7yvjEZH6lthc66nnTu6WzKp1QjCAEJ0bmmnkul5tCXPZbLCOwPSu9UbTz\nbo3irKxOMPPMf+M3pnB211VSyBq0U8ANhj2fgm+hRQwYXuT2lw5KgCHZJTZJ\n1NGR4+GzDJ0O45llxxac0d8ErJ1nZsLOpm29ZZP69RBKJuTt9kPAeo9iKllr\nfmAmqf451Y61Tlx6qqVJMxbMDLCFQham4/2d9MohzCwtIaHActhuxcaBUCIR\nHEnb1ojr0lwtXbo1r68hTbC7DF0KoglTJA3a4uH3op0IYq48z/Ptf4oyhTF6\nS3iDBl6kXF2SbdZlrJQsfaDpz9MYPdWodw//9XSMpFrCZi6BRDc9zfwFZSOC\nMiolCgyDb7pZlq0NrXwXAj/COq6tqfQfQAisVFda1He1wyX6f5sE0TfrYH+y\nKnNlf/PgTYcLUk9Olc0i3YA0AmdI0S8qFQv1QTbdMmQnAUmZR7Z7rzzBzKpi\n75qb\r\n=Qin0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ45ck4aUirR/goBbhNq/Y8IlTfww4Kr6Ady2snb6AtQIgOh1xN6/h/qbUmOne5hyUAwKJZeVyGGIX2rBQr+tjsCA="}]},"_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-tab_0.26.0-canary.893fc857.0_1641581652429_0.5409269392874243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.69ba13b7.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","@material/mwc-tab-indicator":"0.26.0-canary.69ba13b7.0","@material/tab":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.69ba13b7.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-OI5xA7AeB6TbfGCo2LP1Ujw016XfIkk4wefMFO/Q3YznsUsm+hV0epeVXcg3ygCp1iaQ8iDLpZunvMokI1oifw==","shasum":"915bc6e1ceb9a93cbc133ed2e9436798ffc47808","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.69ba13b7.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+LCRA9TVsSAnZWagAAHMAP/3vFzBFJwJBzmxHUWtZh\nnoRfZ4e3di2oStYUH1quUdW3G3+yHDt0t9P4PMhdG1LxrQJF3MVYklhsRmT/\noqyNevUISZZlCU6OrjmqrqcERpi+3Ocdia89BoEE3rZCh7urS1IPZsh2hDmd\nV7+tlaJxZOSajYI7uYSA/01IzHoecYNqGLUiqav6Mc2FWRyJ1wLl+umP4wpf\n75FiAWzBPuYbzfMH5gSUziyXMd3Wa/VaBymDG58sTX4EcU//F7CXFEDTqjHD\nNwJ4LBIMGO2yVMTUE7gmHuqklFtoFdhKLgh/ef1lQCEgptzlrgbrOtrR4ptt\nJk4Z1OSmfnaxckJnqOBaog9daSdygUTYxpuxPt2XPqV0l9KGqVTqwL1wOv5d\nnfqZYKpUmuMvSF4raLXDW7xCKWdYf6rFRbKNbnpEDYtqFbcEMut/qQv75+Py\njf/lBkwN7aJhHsn/x+0W6U7NpPbc+HDUJ7+RAnZgEOyY2laok5qRh+ExZUC+\nfdZ1GVYs3qE6h21SZ3aF9AEiVjc+J5syDo7t7E5dCUyNXL5sLGvD6OOggl1Q\nY3jRtSGd6f/SqIc1eGb4B4v9vxthxEx8DVHDjgBRZNswo/ZZYWyAkcTtpWsl\n3yE1oIXAaRnfgcMzg3vOYRdtxqP1r/GW35C/9QvMuARgubdgNWqbnbOYYo6y\n+uac\r\n=h4ml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEVsfIlBKjpKA2cfLjcqxgbq/BgdQNrD8WhSmlvXqULwIgfKHT0Cp0UGteWSyBAAEeY/vfoVKmbyMb6oH99lHmL+k="}]},"_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-tab_0.26.0-canary.69ba13b7.0_1642631051109_0.5192161215438273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-tab","version":"0.26.0-canary.0af8ade5.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","@material/mwc-tab-indicator":"0.26.0-canary.0af8ade5.0","@material/tab":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"0.26.0-canary.0af8ade5.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-w+37h+FubXX0ClR3OeLTTT9fWX3K3Yn8M1x2m5PMeDhuhYNVEX309oNcfucBQTa4kXw5Ob1w8xqDEQkbNyl3AQ==","shasum":"aff5b265d9d8cebeb948a27f304006455da6b0ec","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0-canary.0af8ade5.0.tgz","fileCount":15,"unpackedSize":71757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeoCRA9TVsSAnZWagAAbkMP/1LjVO3v9NVIekKozO17\nJuQHZecmiCBJ1rrVpEjuKaNxN7SZKMrfGNIfppQaIXKS99iO14YOO48nW5ge\ntr3yVmXED6J+uXYj1ASchrJm6jxEQJTwQPIiCHdn34x0OESBmrT6tGOMaVLL\no98drtwpIMGn6HLRJtN/6eYzhtREFKcOhMfSw29ypnEq3jFrM4/AvaDcGUvv\nMPvJI8DTgo8I+P/sxPV47k1CTL3C8v0/wJeOHUiD5nBgpe/mpd9pRPRLKWlK\nD3lolVsFuZ8xt5AvmPGscuuK/0stxOnmPreJkeUGsGzGVQqls45JLNdbvMAR\nZrl5jT9WnfWpDdVPhXaMxwZaFENPYgMGu/bhCEAGwNB6kM+s/y51WK/oI7Tw\nOkWFq/zOJhrvbndMwBN4op2TiF7YglmLFFR2DatCp6+82+LzKSMsvGx9i0uq\nTbNCAG5kHRy1apqMMfxKkHKS7ejLu//vNlYKMqBmyRw2nm24YxKHtgEJ2iWa\nm+/uvyKOLWpNH+VPt3BuqVoWdboyPOZ4U8j4jSXggd0CaYljqR/FjhejfUS6\nyn6lQpg92dlU0teU4Nm2ZfVii+3LmOU4AUfNuKoCBqIohKiteVnsUBEbRqaM\nFX0aeZN8mW/QWtLI+HEK6Q7UbE0U3/H2VC75H+qNRsPICUrnAr5dPVQnt3fU\n1je0\r\n=ZpI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfMEYe8UM/MHfiesu7kOOgetg+DWhJcc4fN+5dIZc6PAiEA9j7yUPbKcu/N3cVA3VZk1n0yaJeb1mtBDjqZ1xAtwB8="}]},"_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-tab_0.26.0-canary.0af8ade5.0_1644271528604_0.12148524076053624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-tab","version":"0.26.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-ripple":"^0.26.0","@material/mwc-tab-indicator":"^0.26.0","@material/tab":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.26.0","@material/ripple":"=14.0.0","@material/rtl":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-jT4CnL6XGohhEZ/K42YMPecAZMPYDlGTWW6Tx7+jx0IUFWBHbt2+whCiscQmaKIz3lHj+u1z3SShu239PkAJTw==","shasum":"a54f7dfb5ecb9d65a42d61d1af2c819bc7561d5a","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.0.tgz","fileCount":15,"unpackedSize":71676,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4zzfliDexGehyt8cf72yXRqykFwTJaJ78sqxC38b+5AiEA2vqoItGd483avyVl2oDVWh8kOyFC13uRPz1s7/WpZKw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2QA/+ORPLTxIFt/aJ9B1ziy7fkvwaLHRaX+l2wwekhvY8Hk17qq6s\r\nLIMhDW+zFobbP64LfLb+xa/oRpel5vb1RkiG5TM0Q0NIfaWDuV8/5ZI8h7hd\r\nbo8y9JKGEs5tiR3FDVRsuxKEqYmwMqyZ3t7TZVOMgK5kQDWhMQA5R17SYBFh\r\nFN4/jQl95wZnNb05srTsQU3UJ11ALB6gxZunNulClpAHzKiMnRZYF7qkS661\r\nExiQQqQG5DDXepkDYWSCxXVuOyEZvLCumDNypqiVKJXdxVbXErBWIKdUI6Vl\r\nQdblZiU7tOdGfaQmgov3LUlTf5o/gfuFGSzxOxjHyU5sgNb5mfNIKMQoNOre\r\nek9/FjvVisPEOvI8gwF3mzwzqp/F13xDGfz2mhUV06Tl8qB6ccPXD1rlLcmG\r\nSY/VlaiO/Ell1MmNlF9XEc5QnZmZK6C1TNllZW3Gwo2eEBQxXP3EH3ShckQH\r\n7CrzZog2aMhjPw63jv+LNBuP52FKXWP5VZJ4JLCWyyZZL6TH+wlpvmZtiQvM\r\nb/kBwgEMlJ3v3ajbLYa+599Rr1Bymi7a0AZl5zKUlMUSzmcItQj/jxE5bXBt\r\ngWbk19jYkEVpmqF3jsGwYgBzDUzV2XtmvhAV7RE3HwS9Kry/dv39EV6kWQsO\r\n+9J4oCA/n2EsNTXutkAB6ePg5367kDjZBik=\r\n=zhqG\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-tab_0.26.0_1651599033865_0.6367496949641174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-tab","version":"0.26.1","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-ripple":"^0.26.1","@material/mwc-tab-indicator":"^0.26.1","@material/tab":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.26.1","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-ea4IBj6R6Ch0DTa4oCQ6vBPYqwV9f/i8ULuy2fnc/YOyO5X+MSJrd5WRk93+XcQcEoajQMFLjnrrilg/u7lbVw==","shasum":"82b4bb35f90017302afc99c279a5092ed03808e7","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.26.1.tgz","fileCount":15,"unpackedSize":71933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTew1BKoku7BnrxIHohpg0FDt7tPPlUG5AuQb/nOsjmgIhAPb9jEra5Pp6vjXNgycnhULKp1YUR2TOiyDPzLDn0cXr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJoA//dvwJmSYWXddowBrLgB8s1MsPForh0xTY/d4OCWJ1zAFxiNGN\r\nDgOT2znzAsJgXbFnIqTFt+YTNkXbqH3B7s06OpsjFN3oZHhdxvjubTjs3Yi5\r\nNzCKIVG4hlHRtxhoTZavOsH24EZM1nC9b8pbpnN7An2OrG4XBeTESUj2O9gR\r\nSEx/IjKd4g8uekrnfub8zU6b0TSIuwLqQSL5v6PwA7eWLMu6lmQpcJcMSAEq\r\n5G09TbnPxYUvga13nRReiwjrZvjaLglI6jyJRo59hCs7+44BM6z0EDTewyNt\r\nGW6WHC0/rH5pW0x0H1Fe85nZO5tV7dY0FcQMGmewXj1LFa1V5DB1hNDv98M5\r\nQ+P8LA8PiLdxIq0IJnJZmho0puXHSQuNlQJZHnhtez8Ha9TQ3f1ADf7K+lKf\r\nvjIKSwLxYNS0iznNKOfkSXzwGOUJZchItHtlVySiOd0o+LDA7WAOK8FRMjSP\r\nNAoybJNRKw7cUuMOYLhAZrLriy+plG2MSOd4vzjyg02K/AXcDzLYCeRpdDJ1\r\n42rUY5rfuf5C+Lkx0hG1Yjoz1KPc6nu09mxFtsUNe5X36rgBQlXoctF3EUf7\r\nxZPZE7+slFN/LiZkhGaMikRwHHs830hOUZ0KOA21vwVV5hnDmq6vrOatUn4G\r\n1Z1Rwyh12vqctxeMrcBZ6EAVR1Dk8ks1Fno=\r\n=RqIV\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-tab_0.26.1_1652128311776_0.8230950564910431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-tab","version":"0.27.0","description":"Material Design tab web component","keywords":["material design","web components","tab"],"main":"mwc-tab.js","module":"mwc-tab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-ripple":"^0.27.0","@material/mwc-tab-indicator":"^0.27.0","@material/tab":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-icon":"^0.27.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-BhX6hZYjPL+d3Gcl6rVHNPiEAudgMHA+7mHo2keqbIiFRLKa2CU+omHZO/82+EBan/TPL6ZK39Oki8aIaAJcRQ==","shasum":"d1c30d7a4502ffcd558dd3dd84a18b34e434ad8d","tarball":"https://registry.npmjs.org/@material/mwc-tab/-/mwc-tab-0.27.0.tgz","fileCount":15,"unpackedSize":71933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3Q7v8a3GfvPn8HQa4cFkqcwMppCqwO5HNYhOLP1yPhAiATDN6HYtkeJcvrbw9FBNUNUE3BUrkNZZk/nAEy9DsuZg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCmw/8Ccb/IbxZ2mLQkA2Zg9Dg1RFhcuBBHy0Bjinxp5BtsABxm1iZ\r\n+1VJR30cvcXGWgk/CZPRCFiEUNeGgpOG7YJAQ4PoRfv/w6mNjkehD6U4pLO1\r\nq13ayc86+0+Vso/YOZK1gEtKEatID8hcq6XtPAJ6FBrH6qAeZjmduF+0fF74\r\nvRAMw+975A/AIU1lnaifqUGbJxiM1m9F2Frq3iMSW5oyASynp9oPUZyG8Pem\r\nXXJVgJsF4iViAVkAYZHO9mVvpJDuISapsYqHPLaq8e9I1nkgGHkAcTwdo3Lz\r\nqYe2zhDgykj78mQyfYqrm9kfhHvGSxkoEwxW14F7WEcK76S2vZXmUjqNzUt1\r\n0/nnpOtA1BdpNrV7BVJ2EKBNLM5UYzquYkT/lzuhegz/UWgfVSi7ULtjeK9N\r\nnPUhXf+MNnyS0KF2st3IcAT1RSDMuitcvakm6+naG+17fq3y4m8KpUlevO8H\r\ngqITjOpgEIRyaYBww0ZmXCFB+A1Y9MJz+5/fsgvzy6cX+idbG51CX8TFDEym\r\n4sXRwUClDcZqZPcxkP+4auDtpPSo2lSNFHa6qW1JVVNwD8tNtKYcPaObZvmE\r\npmbSSWfJX6HrDmR+J3ncy3awBO7m5jpWam7XXesU2u2ceT72W9IlxJ13m8b9\r\nV+QwckxjPKPsANzW3Rl9a+yOEFDZZPvU1Kc=\r\n=k9uE\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-tab_0.27.0_1660331529426_0.8464309413875091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:27.763Z","0.6.0":"2019-06-05T22:20:28.013Z","modified":"2024-04-04T18:58:45.727Z","0.7.0":"2019-08-27T21:23:53.024Z","0.7.1":"2019-08-28T02:54:32.093Z","0.8.0":"2019-09-04T00:04:53.312Z","0.9.0":"2019-09-27T01:36:22.876Z","0.9.1":"2019-09-30T21:05:17.223Z","0.10.0":"2019-10-11T23:28:25.503Z","0.11.0":"2019-11-26T21:49:35.375Z","0.11.1":"2019-11-27T00:26:43.785Z","0.12.0":"2019-12-17T23:47:58.840Z","0.13.0":"2020-02-04T04:46:41.468Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:31.730Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:08.275Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:34.648Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:00.694Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:19.796Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:55.704Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:08.560Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:02.808Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:59.132Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:28.193Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:48.593Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:40.726Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:25.841Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:29.863Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:29.199Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:46.901Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:00.895Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:33.368Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:07.567Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:43.159Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:00.583Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:12.243Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:06.369Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:27.551Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:33.734Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:57.129Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:06.345Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:55.345Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:37.324Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:27.039Z","0.14.0":"2020-03-19T21:28:44.770Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:07.544Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:23.803Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:06.135Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:43.438Z","0.14.1":"2020-03-23T17:57:40.587Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:06.227Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:50.632Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:18.975Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:12.608Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:16.157Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:41.204Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:30.298Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:40.780Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:29.806Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:18.000Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:04.427Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:56.801Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:14.960Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:25.063Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:57.479Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:04.702Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:21.197Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:36.539Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:46.853Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:51.581Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:45.113Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:22.424Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:03.846Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:51.891Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:54.991Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:33.396Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:14.142Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:18.626Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:43.203Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:29.195Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:22.864Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:31.094Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:28.590Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:21.114Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:38.913Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:30.483Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:26.650Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:32.009Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:51.693Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:10.807Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:54.513Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:04.972Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:10.776Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:14.035Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:13.826Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:30.180Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:32.032Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:51.381Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:58.211Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:56.142Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:57.495Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:14.090Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:25.690Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:41.623Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:35.679Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:00.323Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:17.990Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:02.762Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:48.013Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:24.557Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:52.759Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:44.766Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:07.866Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:16.815Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:22.042Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:58.496Z","0.15.0":"2020-05-05T22:36:18.717Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:40.170Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:58.721Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:28.244Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:45.503Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:59.167Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:18.849Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:51.528Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:37.649Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:02.041Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:27.742Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:09.917Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:28.048Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:40.944Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:51.160Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:25.215Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:32.553Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:19.774Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:03.313Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:43.584Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:54.413Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:46.076Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:06.422Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:30.102Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:35.977Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:01.231Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:27.230Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:06.110Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:36.875Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:29.232Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:53.275Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:03.974Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:02.641Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:20.460Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:32.592Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:27.263Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:24.386Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:43.284Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:14.583Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:49.852Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:22.348Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:52.766Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:00.612Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:41.052Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:03.653Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:27.860Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:50.721Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:05.112Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:13.357Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:37.801Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:07.252Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:19.799Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:54.079Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:20.409Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:58.781Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:59.763Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:51.996Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:52.423Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:02.963Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:49.667Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:56.842Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:54.707Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:56.282Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:14.858Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:27.224Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:34.942Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:07.329Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:27.089Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:33.534Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:17.423Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:27.700Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:39.831Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:59.732Z","0.16.1":"2020-06-30T21:14:53.488Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:26.144Z","0.17.0":"2020-07-01T19:44:24.161Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:37.313Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:41.168Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:44.116Z","0.17.2":"2020-07-02T05:58:26.679Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:33.876Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:51.662Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:29.456Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:40.686Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:53.578Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:00.301Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:42.877Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:33.377Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:34.663Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:20.243Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:00.944Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:49.769Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:11.607Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:38.757Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:11.329Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:57.803Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:16.900Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:47.167Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:04.428Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:44:12.746Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:45.568Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:07.234Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:10.532Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:58.689Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:54.190Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:12.693Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:39.081Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:44.887Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:04.732Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:25.283Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:34.199Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:46.052Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:04.744Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:26.674Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:39.897Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:48.658Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:51.929Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:42.642Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:05.295Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:29.563Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:29.108Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:51.632Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:07.274Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:46.061Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:21.571Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:42.235Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:56.124Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:24.527Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:57.660Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:52.243Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:55.015Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:38.702Z","0.18.0":"2020-08-03T21:24:28.824Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:06.422Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:24.060Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:01.956Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:13.120Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:40.358Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:36.847Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:01.397Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:39.919Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:00.298Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:09.756Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:42.450Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:39.325Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:14.225Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:57.426Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:22.294Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:41.590Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:45.140Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:34.306Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:56.043Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:17.980Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:49.719Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:51.831Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:15.317Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:55.150Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:22.997Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:20.116Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:08.253Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:14.048Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:13.279Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:42.462Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:22.958Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:52.249Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:28.855Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:09.134Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:22.579Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:38.184Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:26.418Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:22.294Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:30.620Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:37.262Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:52.689Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:23.879Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:32.623Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:52.076Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:51.153Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:09.687Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:54.688Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:21.633Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:30.320Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:35.708Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:29.130Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:48.128Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:30.270Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:29.722Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:35.915Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:43.947Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:33.800Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:00.047Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:07.026Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:37.430Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:17.209Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:51.328Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:57.324Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:48.426Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:01.056Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:23.628Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:45.747Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:39.970Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:47.674Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:40.394Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:30.930Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:27.823Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:23.482Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:41.871Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:12.001Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:22.609Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:38.490Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:01.203Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:45.955Z","0.19.0":"2020-10-07T22:33:29.594Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:57.617Z","0.19.1":"2020-10-08T23:06:02.019Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:29.108Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:34.463Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:31.733Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:35.385Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:06.963Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:47.365Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:44.905Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:30.453Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:18.742Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:33.488Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:09.554Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:19.210Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:28.928Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:15.616Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:54.893Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:52.469Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:14.406Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:04.889Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:00.667Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:11.210Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:19.317Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:23.407Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:18.169Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:03.036Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:42.511Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:22.420Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:31.405Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:09.347Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:28.569Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:58.832Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:28.586Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:13.420Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:53.978Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:41.638Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:05.194Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:27.918Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:38.163Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:34.498Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:30.203Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:07.372Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:44.845Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:31.851Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:34.323Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:04.653Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:18.278Z","0.20.0":"2020-12-03T22:28:57.141Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:06.573Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:23.670Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:14.958Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:05.640Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:14.425Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:27.680Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:03.367Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:55.438Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:52.289Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:35.700Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:27.199Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:22.561Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:45.675Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:15.793Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:29.100Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:26.502Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:48.125Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:40.864Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:32.413Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:40.541Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:51.374Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:39.169Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:32.948Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:13.785Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:42.957Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:57.744Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:52.625Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:48.956Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:47.654Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:48.895Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:48.065Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:02.617Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:09.388Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:30.398Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:47.038Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:24.897Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:30.850Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:46.057Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:25.742Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:57.634Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:58.817Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:43.023Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:05.658Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:23.150Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:34.430Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:01.237Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:24.642Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:24.909Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:15.442Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:24.170Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:38.879Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:09.581Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:21.345Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:30.749Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:48.603Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:13.874Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:24.385Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:34.709Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:40.873Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:24.730Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:32.588Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:26.373Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:44.749Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:03.231Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:13.352Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:28.320Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:57.355Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:42.452Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:25.869Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:49.709Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:56.606Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:48.723Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:31.384Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:44.809Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:16.874Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:04.416Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:33.381Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:58.419Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:58.887Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:44.110Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:11.276Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:04.656Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:16.664Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:47.331Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:41.404Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:13.121Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:56.139Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:23.395Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:05.924Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:36.763Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:23.672Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:16.254Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:38.797Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:12.480Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:47.951Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:44.351Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:07.348Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:35.784Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:50.217Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:26.189Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:27.606Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:41.192Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:21.482Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:22.755Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:38.855Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:07.728Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:13.441Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:17.931Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:54.650Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:55.068Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:46.000Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:26.845Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:11.166Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:34.010Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:13.731Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:38.356Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:18.888Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:17.943Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:52.390Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:26.281Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:45.034Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:34.549Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:43.356Z","0.21.0":"2021-04-30T23:58:10.960Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:31.843Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:28.545Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:52.503Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:54.853Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:12.433Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:42.933Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:36.295Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:15.294Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:07.657Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:34.609Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:30.477Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:47.697Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:50.328Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:35.106Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:22.940Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:55.282Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:52.577Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:37.444Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:39.210Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:28.013Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:38.996Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:09.321Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:42.968Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:17.855Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:55.341Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:47.235Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:12.550Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:30.499Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:17.319Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:17.503Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:41.604Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:05.364Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:33.428Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:38.655Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:41.722Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:43.737Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:19.789Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:40.428Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:36.606Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:24.116Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:32.317Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:35.302Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:23.039Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:24.639Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:46.138Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:24.693Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:55.560Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:17.816Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:34.084Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:11.327Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:58.097Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:54.296Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:21.124Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:27.360Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:17.426Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:31.294Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:06.775Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:18.921Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:36.561Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:42.500Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:30.173Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:48.385Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:02.265Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:07.008Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:54.680Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:21.097Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:56.379Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:53.822Z","0.22.0":"2021-07-14T22:38:55.599Z","0.22.1":"2021-07-14T22:52:53.174Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:23.046Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:49.850Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:03.453Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:54.460Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:19.201Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:07.645Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:16.871Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:31.694Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:03.112Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:22.304Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:51.902Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:20.916Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:56.794Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:00.255Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:52.566Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:58.475Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:54.813Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:12.753Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:11.023Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:20.324Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:29.230Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:31.292Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:04.218Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:15.563Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:23.699Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:26.557Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:51.139Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:43.252Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:31.528Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:12.012Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:08.184Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:06.015Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:49.984Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:02.231Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:15.091Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:50.991Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:12.433Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:53.262Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:14.941Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:20.557Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:00.404Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:24.649Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:36.204Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:20.234Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:47.828Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:40.559Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:43.412Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:34.375Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:42.513Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:48.311Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:52.464Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:38.015Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:01.034Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:25.858Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:43.100Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:15.016Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:04.512Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:21.750Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:36.679Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:15.370Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:05.949Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:22.878Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:07.959Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:56.324Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:22.909Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:51.251Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:05.323Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:33.941Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:47.373Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:58.740Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:08.236Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:43.902Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:20.715Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:04.631Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:44.130Z","0.23.0":"2021-09-13T21:35:53.144Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:28.710Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:34.307Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:39.857Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:42.171Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:15.787Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:32.777Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:14.187Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:57.960Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:34.830Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:06.416Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:58.644Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:20.883Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:00.127Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:21.930Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:07.866Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:07.322Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:00.836Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:24.389Z","0.25.1":"2021-09-21T03:12:45.963Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:21.375Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:30.615Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:02.319Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:51.947Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:22.299Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:35.695Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:45.252Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:04.832Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:03.619Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:07.115Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:30.400Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:47.289Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:38.601Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:34.752Z","0.25.2":"2021-10-11T23:18:33.461Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:42.669Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:10.845Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:50.778Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:43.328Z","0.25.3":"2021-10-21T17:55:44.727Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:42.792Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:09.375Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:00.453Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:38.284Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:05.955Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:48.288Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:13.564Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:16.651Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:09.064Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:41.398Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:33.028Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:31.083Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:02.135Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:20.272Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:57.992Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:30.322Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:13.968Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:12.620Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:11.304Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:28.756Z","0.26.0":"2022-05-03T17:30:34.017Z","0.26.1":"2022-05-09T20:31:51.926Z","0.27.0":"2022-08-12T19:12:09.623Z"},"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 tab 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/tab"},"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-tab.svg)](https://www.npmjs.com/package/@material/mwc-tab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-web/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\nFor usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/tab-bar)\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `icon` |\tSlotted icon to display. Only available if `hasImageIcon` or `icon` are defined.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | --------- | ------- | -----------\n| `label` | `string` | `''` | Text label to display in tab.\n| `icon` | `string` | `''` | Material design icon name to display (overridden by slotted icon).\n| `hasImageIcon` | `boolean` | `false` | Displays a slot to show an image icon.\n| `indicatorIcon` | `string` | `''` | Material design icon name to display as the indicator.\n| `isFadingIndicator` | `boolean` | `false` | Indicator fades in and out instead of sliding.\n| `minWidth` | `boolean` | `false` | Shrinks tab as narrow as possible without causing text to wrap.\n| `isMinWidthIndicator` | `boolean` | `false` | Shrinks indicator to be the size of the content.\n| `stacked` | `boolean` | `false` | Stacks icon on top of label text.\n| `active` | `boolean` (readonly) | `false` | Indicates whether the tab's indicator is active.\n\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `activate() => void` | Activates the indicator.\n| `deactivate() => void` | Deactivates the indicator.\n| `computeDimensions() => MDCTabDimensions`\\* | Computes the dimensions of the content.\n| `computeIndicatorClientRect() => ClientRect` | Computes the dimensions of the indicator.\n\n\\* See MDC's [`Tab` types](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) for definition.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `MDCTab:interacted` | `mwc-tab` | `{tabId: string}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n### CSS Custom Properties\n\nName | Default | Description\n------------------------------------ | -------------------------------------------------------- | -----------\n`--mdc-tab-height` | `48px` | Height of the tab.\n`--mdc-tab-horizontal-padding` | `24px` | Horizontal padding on either side of the tab.\n`--mdc-tab-stacked-height` | `72px` | Height of the tab's stacked variant.\n`--mdc-tab-text-label-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label.\n`--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ----------------------------------------- | -----------\n| `--mdc-theme-primary` | Color of the activated tab's text, indicator, and ripple.\n| `--mdc-theme-secondary` | Color of the indicator icon if defined.\n| `--mdc-icon-font` | Icon font to use for `icon` and `indicatorIcon`.\n| `--mdc-icon-size` | Size of the text icon.\n| `--mdc-typography-button-` | Styles the typography of the tab label.\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","keywords":["material design","web components","tab"]}